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>