bootstrap-datetimepicker日期插件月份bug问题解决

最新推荐文章于 2025-05-11 13:37:07 发布

心酱儿

最新推荐文章于 2025-05-11 13:37:07 发布

阅读量6.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/wbx_wlg/article/details/79225467

javascript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个关于datetimepicker插件的问题及解决方案，该问题导致月份选择出现两个月的时间偏差。通过修改源码中的月份获取方式和调整月份元素选择，解决了视图显示错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用datetimepicker 时间插件获取日期的时间区间，但在应用过程中发现月份的选择有两个月的时间偏差，比如: 开始时间选择为2017-10，那结束时间的开始时间应该是在2017-10之后，但是视图显示2017年的8、9月份都可选，阅读插件源码有两处错误，一个是650行的月份获取错误；另一个是784行的时间选择器出现错误，错将时间视图中左右两个按钮的span元素放在了月份的span元素中，这样月份元素共有14个，现将正确代码记录下来：


649：  endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
650：  endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() + 1 : Infinity, // edit
       //  endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() - 1 : Infinity,  //原码

 783：  var currentYear = this.date.getUTCFullYear();
 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');// 原码

例子如下：

<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>

//月的开始时间
    $('#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);