双日历时间段选择控件

最新推荐文章于 2017-08-01 11:14:22 发布

weixin_30596735

最新推荐文章于 2017-08-01 11:14:22 发布

阅读量524

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/clearsky/p/6020158.html

版权

基础使用入门

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 + ')');
}