双日历时间段选择控件

基础使用入门

1 引入

双日历时间控件须要依赖bootstrap、jQuery、moment 环境！
下载地址：http://www.daterangepicker.com

这里要强调一下：注意引入的顺序，由于datepicker.js的运行依赖moment.js，因此必定要确保moment.js在datepicker.js以前引入。

2 容器元素

在html页面中须要建立日期控件的容器元素。
通常是用input，例如：
<input id="datepicker" value=""/>
根据状况和样式的不一样有对应的写法。

3 调用

最简单的调用方法是：
$(“#datepicker”).daterangepicker();
固然也能够传入参数和方法。

4 参数

这里简单介绍几个经常使用的参数。

{
   "autoApply": true,  // 选中后自动关闭控件窗口
    "locale":{
        "separator": " 至 “,  //开始时间与结束时间的链接符号
        "format": "YYYY-MM-DD”,  // 日期格式
        "daysOfWeek":["日","一","二","三","四","五","六”],  // 控件上的周的现实方式，也可设置成英文。
        "monthNames":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月”] // 控件上的月的现实方式，也可设置成英文。
    },
    "dateLimit": {
        "days": 90  // 时间的最大选择范围。
    },
    singleDatePicker: true, // 变成单日历控件
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    } // 其中moment()能够获取到当前时间。经过subtract()方法能够从当前时间推算出你想要获得的时间。
}

除此以外，还有其它参数，详情参见上述网站。

5 待执行函数

例如：
传入本身封装的函数，执行要达到的效果。

function(start, end, label) {
    
    $('#daterangepicker').html(
        start.format('YYYY-MM-DD') + ' - ' +
        end.format('YYYY-MM-DD')
    );
    $('#beginTime').val(start.format('YYYY-MM-DD'));
    $('#endTime').val(end.format('YYYY-MM-DD'));
    // console.log(
    //     'New date range selected: ' +
    //     start.format('YYYY-MM-DD') + ' to ' +
    //     end.format('YYYY-MM-DD') +
    //     ' (predefined range: ' + label + ')');
}

6 网站资源

http://www.daterangepicker.com
https://github.com/dangrossman/bootstrap-daterangepicker