jQuery12种双日期插件

Posted 2021-04-08 Java小学生的成长日志

jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。jQuery双日期插件支持自定义皮肤、浏览器兼容性非常好，并且支持多种时间格式。

引入daterangepicker双日期插件

<link rel="stylesheet" href="css/daterangepicker.css" />  
<script src="js/moment.min.js"></script>  
<script src="js/jquery.daterangepicker.js"></script>

               

日期输入框

<input type="text" id="datepicker" value="">

               

daterangepicker默认调用方法

$('#datepicker').dateRangePicker();

               

daterangepicker默认参数：

{  
    format: 'YYYY-MM-DD',  
    separator: ' to ',  
    language: 'auto',  
    startOfWeek: 'sunday',// or monday  
    getValue: function()  
    {  
        return this.value;  
    },  
    setValue: function(s)  
    {  
        this.value = s;  
    },  
    startDate: false,  
    endDate: false,  
    minDays: 0,  
    maxDays: 0,  
    showShortcuts: true,  
    time: {  
        enabled: false  
    },  
    shortcuts:  
    {  
        //'prev-days': [1,3,5,7],  
        'next-days': [3,5,7],  
        //'prev' : ['week','month','year'],  
        'next' : ['week','month','year']  
    },  
    customShortcuts : [],  
    inline:false,  
    container: 'body',  
    alwaysOpen:false,  
    singleDate:false,  
    batchMode:false,  
    beforeShowDay: [function],  
    dayDivAttrs: [],  
    dayTdAttrs: [],  
    applyBtnClass: ''  
}

               

当该日期选择器在DOM中选择某个日期范围时会触发三个事件。

$('#datepicker')  
.dateRangePicker()  
.bind('datepicker-change',function(event,obj)  
{  
    console.log(obj);  
    // obj will be something like this:  
    // {  
    //      date1: (Date object of the earlier date),  
    //      date2: (Date object of the later date),  
    //      value: "2013-06-05 to 2013-06-07"  
    // }  
})  
.bind('datepicker-apply',function(event,obj)  
{  
    console.log(obj);  
})  
.bind('datepicker-close',function()  
{  
    console.log('close');  
});

               

在你调用$(dom).dateRangePicker()之后：

$(dom).data('dateRangePicker')  
    .setDateRange('2013-11-20','2013-11-25');  //set date range, two date strings should follow the `format` in config object  
    .clear();   // clear date range  
    .close();   // close date range picker overlay  
    .open();    // open date range picker overlay  
    .destroy(); // destroy all date range picker related things