欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于bootstrap的双日历插件 daterangepicker

程序员文章站 2022-03-30 15:34:30
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围在今天及今天之后 3.结束日期在开始日期之后,根据开始日期变化 4.需要在选择好开始日期之后自动调起 ......

我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下:

1.两个单日期格式分别为开始日期和结束日期

2.开始日期可选择范围在今天及今天之后

3.结束日期在开始日期之后,根据开始日期变化

4.需要在选择好开始日期之后自动调起结束日期选择框进行选择。

下面贴代码:

html:

<div class="col-sm-2 mb-2">
      <input type="text" name="daterange1" id="startdate"  class="form-control ks-daterange text-center" placeholder="入住时间">
</div>
<div class="col-sm-2 mb-2">
     <input type="text" name="daterange2" id="enddate"  class="form-control ks-daterange text-center" placeholder="退房时间">
</div>

js:

var day_length = 1; //初始化今天距离结束日期的长度
$('#startdate').daterangepicker({
   singleDatePicker: true,
   format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
   separator : 'to',
   // startDate:moment().startOf('day'),
   // endDate: moment().add(1, "days"),
   minDate:moment(),
   locale : {
      format: "YYYY/MM/DD",
      applyLabel : "确定",
      cancelLabel : "取消",
      fromLabel : "起始时间",
      // toLabel : "结束时间",
      customRangeLabel : "自定义",
      daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
      monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月' ],
      firstDay : 1
      },

 }).on('hide.daterangepicker', function() {
   //计算长度
     var s1 = $('#startdate').val();
     s1 = new Date(s1.replace(/-/g, "/"));
     var s2 = new Date();
     var days = s1.getTime() - s2.getTime();
     var time = parseInt(days / (1000 * 60 * 60 * 24));
     if(s1.getTime() - s2.getTime() < 0){
          day_length = time + parseInt(1)
     } else {
          day_length = time + parseInt(2)
     }
     useLast() //初始化结束日期选择框,更新day_length
     $('#enddate').focus() //调起日期选择弹框
})

useLast() //初始化结束日期选择框,避免先选择结束日期的情况

//结束日期必须要封装成方法,不然无法更新day_length
function useLast(){
   $('#enddate').daterangepicker({
   singleDatePicker: true,
   format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
   separator : 'to',
   // startDate:moment().startOf(1,'day'),
   // endDate: moment().add(1, "days"),
   minDate:moment().add(day_length, "days"),
   locale : {
     format: "YYYY/MM/DD",
     applyLabel : "确定",
     cancelLabel : "取消",
     // fromLabel : "起始时间",
     toLabel : "结束时间",
     customRangeLabel : "自定义",
     daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
     monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                 '七月', '八月', '九月', '十月', '十一月', '十二月' ],
     firstDay : 1
     }
 })
}

运行结果如下:

基于bootstrap的双日历插件 daterangepicker

基于bootstrap的双日历插件 daterangepicker

基于bootstrap的双日历插件 daterangepicker

 

最后,介绍下这个时间插件的几个事件:

$('#reportrange').on('show.daterangepicker', function() {  
 //  console.log("show event fired");  
});  
$('#reportrange').on('hide.daterangepicker', function() {  
  // console.log("hide event fired");  
});  

$('#reportrange').on('cancel.daterangepicker', function(ev, picker) {  
 //  console.log("cancel event fired");  
});  

我在上面的例子中,由于要动态改变day_length的值,就用到了hide.daterangepicker

最重要的,一定要引入:

1.bootstrap.min.css

2.daterangepicker.min.css

3.bootstrap.min.js

4.daterangepicker.min.js

5.jquery.min.js

 版本自选