bootstrap-datetimepicker 简单设置及月份bug解决

最新推荐文章于 2024-08-08 07:19:13 发布

mister_snail

最新推荐文章于 2024-08-08 07:19:13 发布

阅读量2.5k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/Mister_SNAIL/article/details/89018578

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

年-月-日

$(".day").datetimepicker({
      autoclose: true,
      language: "zh-CN",
      startView: 2,
      minView: "month",
      format: "yyyy-mm-dd",
      initialDate: new Date(),
      forceParse: 0
    });

年-月

$(".month").datetimepicker({
      language: "zh-CN",
      format: "yyyy-mm",
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 3, // 这里就设置了默认视图为年视图
      minView: 3, // 设置最小视图为年视图
      forceParse: 0
    });

年

  $(".year").datetimepicker({
    format: "yyyy",
    weekStart: 1,
    autoclose: true,
    startView: 4,
    minView: 4,
    forceParse: false,
    language: "zh-CN"
  });

开始时间-结束时间

//	html 
<div class="input-daterange input-group" id="month" >
    <input  type="text" class="form-control" data-time="start"   >
     <span class="input-group-addon">至</span>
     <input  type="text" class="form-control" data-time="end"  >
</div>

// js
    $('#month [data-time="start"]').datetimepicker({
        language:  'zh-CN',
        todayBtn:  false,
        autoclose: true,
        startView: 3,//默认视图为年视图
        minView: 3,
        format: 'yyyy-mm',
        forceParse: true,
        endDate:TodayMonth
    }).on("changeDate",function(e){
        $('#month [data-time="end"]').datetimepicker("setStartDate",e.date);//根据前端选择的结束时间设置插件可选择的开始时间
    }).val(TodayMonth);

    $('#month [data-time="end"]').datetimepicker({
        language:  'zh-CN',
        todayBtn:  false,
        autoclose: true,
        startView: 3,
        minView: 3,
        format: 'yyyy-mm',
        forceParse: true,
        endDate:TodayMonth
    }).on("changeDate",function(e){
        $('#month [data-time="start"]').datetimepicker("setEndDate",e.date);//根据前端选择的开始时间设置插件可选择的结束时间
    }).val(TodayMonth);

注意！用 datetimepicker 时间插件获取日期的时间区间时，在应用过程中发现月份的选择有两个月的时间偏差，比如: 开始时间选择为2019-01，那结束时间的开始时间应该是在2019-01及之后，但是视图显示2019年的2、3月份都不可选。

解决方法：修改源码

650：  
		endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() + 1 : Infinity,  // edit
        //  endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() - 1 : Infinity,  // 源码
784：  
		var months = this.setTitle('.datetimepicker-months', year).end().find('.month').removeClass('active'); // edit 
        // var months = this.setTitle('.datetimepicker-months', year).end().find('span').removeClass('active'); // 源码