sae后台管理端的js，daterangepicker使用

原本只为了日期范围选择器看下sae的前端怎么实现

然后。。。

公共函数两个文件，第一个是各种插件：

typeahead.js 自动完成

//关键词自动完成
$('#page-auto-complete').typeahead({
name: 'twitter-oss',
local: $SAE['search_keywords'] || [],
template: [
'<a href="{{url}}" target="_blank" class="auto-complete-link">',
'<p class="repo-language">{{category}}</p>',
'<p class="repo-name">{{name}}</p>',
'<p class="repo-description">{{description}}</p>',
'</a>'
].join(''),
engine: Hogan,
limit: 10
});

Hogan.js 模版引擎

json2.js json序列化和反序列化（JSON.stringfy,JSON.parse()：为什么我不引入也可以用，在fronzeui中？）

iframe autoheight 不晓得

moment.js 时间（这个好啊！当初我还折腾js的时间兼容呢）

moment('2015-03-19').format('YYYY-MM-DD');

　　

http://www.soulteary.com/大牛的插件 不晓得干嘛用，里面的博客很漂亮 估计以前也是sae的前端工程师吧

i18next 语言

他们的使用方法

//切换语言事件
$('#switch_lang').on('click', function (e) {
var lang = $(e.target);
$.cookie('hl', lang.data('lang'));
window.location.reload();
return false;
})
//获取语言cookie
var curLang = $.cookie('hl');
// i18N_CONFIG该在$SAE中
$SAETOOLS.i18N_ID = $SAETOOLS.i18N({lang: curLang});
//处理语言，好好研究如果用到
$SAETOOLS.i18N = function (params) {
var config = {
'zh_CN': 1,
'en_US': 2
}
// 待完成根据服务器设置返回默认语言,或者IP地址选择
var init = function () {
// 读取COOKIES设置
var curLang = $.cookie('hl');
if (curLang) {
$.i18n.init({
lng: curLang,
fallbackNS: $SAE['modeName']
});
return config[curLang];
} else {
// 读取推荐设置
var jsDefault = $SAETOOLS.i18N_CONFIG;
if (jsDefault) {
$.i18n.init({lng: jsDefault, ns:$SAE['modeName'], resGetPath:'/?m=ajax&a=get_resources&language=__lng__&namespace=__ns__', dynamicLoad:true});
return config[jsDefault];
} else {
// 读取服务器推荐设置 待完成
}
}
}
if (params) {
if (params.lang) {
$.i18n.init({
lng: params.lang,
fallbackNS: $SAE['modeName']
});
return config[params.lang];
} else {
return init();
}

} else {
return init();
}
}

　　

===================

我的任务研究是daterangepicker!

1.引入它的js和css文件

2.初始化中文吧

//初始化daterangepicker
initDaterangepicker: function(starttime, endtime, callback, options) {
options = $SAETOOLS.extend({
format: 'YYYY-MM-DD',
startDate: starttime,
endDate: endtime,
showDropdowns: true,
locale: {
cancelLabel: '关闭',
applyLabel: '确认',
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
fromLabel: '',
toLabel: '',
customRangeLabel: '自定义'
}
}, options);
return this.daterangepicker(options, callback);
}

2.封装一下使用

if ($('#date-range').length > 0 && $("#chart-main").length < 1) {
var initdate = function(stime, etime) {
$('#date-range').initDaterangepicker(stime, etime, function(start, end) {
var stime = moment(start).format('YYYY-MM-DD');
var etime = moment(end).format('YYYY-MM-DD');
$("#stime").val(stime);
$("#etime").val(etime);
getPic('beans', '', 'other', stime, etime);
});
}
initdate($('#date-range').data('starttime'), $('#date-range').data('endtime'));
}

3.dom结构

<div class="input-prepend input-group">
<span class="add-on input-group-addon">数据日期</span>
<input type="text" name="date_range" id="date-range" class="form-control" value="2015-03-19 到 2015-04-18" data-starttime="2015-03-19" data-endtime="2015-04-18">
</div>