bootstrap datetimepicker 插件设置开始时间结束时间

最新推荐文章于 2025-07-10 12:00:27 发布

風缘

最新推荐文章于 2025-07-10 12:00:27 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/liangrongliu1991/article/details/78891029

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用Bootstrap datetimepicker插件实现的日期范围选择器。该选择器确保开始时间和结束时间的有效性，即结束时间不能早于开始时间。此外，文章还讨论了如何通过重置日期选择器的状态解决面板限制的问题。

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

在项目中有用到 bootstrap的datetimepicker插件来选择日期。现在要求实现的是选择一段时间范围，有开始时间和结束时间两个表单选择
这里写图片描述
当先选择开始时间，再选结束时间不能选择小于开始时间的时间。先选择结束时间，开始时间不大于结束时间。以下是实现代码

 var dateOptions = {
    language: 'zh-CN',
    format: 'yyyy-mm-dd hh:ii',
    minuteStep: 1,
    autoclose: true
  },
  $('#startDate').datetimepicker(dateOptions).on('show', function () {
      var endTime = $('#endDate').val();
      if (endTime !== '') {
        $(this).datetimepicker('setEndDate', endTime);
      }else{
        $(this).datetimepicker('setEndDate', null);
      }
    })
    .on('hide', function () {//这里是要求开始时间必选所以在时间面板隐藏时要验证开始时间并显示相应的错误提示（不需要可删除）
      var startTime = $('#startDate').val();
      if (!startTime) {
        $('.start-box').addClass('has-error');
        $('.date-box .error-msg').show();
      } else {
        $('.start-box').removeClass('has-error');
        $('.date-box .error-msg').hide();
      }
    });
    $('#endDate').datetimepicker(self.dateOptions).on('show', function () {
      var startTime = $('#startDate').val();
      if (startTime !== '') {
        $(this).datetimepicker('setStartDate', startTime);
      }else{
        $(this).datetimepicker('setStartDate', null);
      }
    });

点击清空按钮，点击后输入框的值清空。代码如下：

$('.date-box .btn-cancle').on('click', function () {
      $('#startDate,#endDate').val('');
 });

不过这里有个问题就是，就是总有一个日期面板恢复不了到初始状态（如先选择开始时间再选择结束时间，然后点取消，当再选择结束时间发现面板已经限制了开始时间），目前我也没有真正明白是什么原因引起的，看了源码，从对应的方法中了解，应该是this.startDate或this.endDate被修改了。如果把这两个值恢复默认值就不会出现这样的问题。

//...

setStartDate: function (startDate) {
      // this.startDate = startDate || this.startDate;
      // 传入空或null时恢复默认
      this.startDate = startDate || new Date(-8639968443048000);
      if (this.startDate.valueOf() !== 8639968443048000) {
        this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType, this.timezone);
      }
      this.update();
      this.updateNavArrows();
    },

    setEndDate: function (endDate) {
       // this.endDate = endDate || this.endDate;
      //传入空或null时恢复默认
      this.endDate = endDate || new Date(8639968443048000);
      if (this.endDate.valueOf() !== 8639968443048000) {
        this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language, this.formatType, this.timezone);
      }
      this.update();
      this.updateNavArrows();
    },
    //...

如果不想改源码还有另外一个方法先remove再绑定事件：

$('.date-box .btn-cancle').on('click', function () {
      $('#startDate').val('');
      $('#endDate').val('');
      $('#endDate').datetimepicker('remove');
      $('#endDate').datetimepicker(dateOptions).on('show', function () {
        var startTime = $('#startDate').val();
        if (startTime !== '') {
          $(this).datetimepicker('setStartDate', startTime);
        }
      });
    });