bootstrap-datetimepicker区间选择设置起始时间限制-优快云博客

本文链接：https://blog.youkuaiyun.com/Tessa_zzl/article/details/105794609

本文介绍了如何在使用bootstrap-datetimepicker时，设置时间区间选择的起始时间不能超过结束时间，以及如何重置这个限制。默认情况下，允许选择的最新时间是当前日期。对于清除startDate和endDate限制的问题，提供了官方文档上的解决方案链接。

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

对一个时间区间选择, 限制时间区间的开始时间不能超过结束时间, 可以重置该限制.

由于该时间区间选择器常用于做筛选条件, 所以这里默认情况下, 两个选择框可选择的最新的时间 (即endDate的设置, 如果不需要该限制, 可以在初始化的时候不写) 就是当前日期.
在这里插入图片描述
注意: 这里不再写引入文件等多余的代码

<div class="col-sm-3 cld-double-date">
  <div class="col-xs-6">
     <input type="text" class="form-control" id="myStart" placeholder="开始时间"  style="background: #fff" readonly>
   </div>
   <div class="col-xs-6">
     <input type="text" class="form-control" id="myEnd" placeholder="结束时间" style="background: #fff" readonly>
   </div>
 </div>

// 初始化
$('#myStart').datetimepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    autoclose: true,
    minView: 'month',
    initialDate: new Date(),
    endDate: new Date()
  });
  $('#myEnd').datetimepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    autoclose: true,
    minView: 'month',
    initialDate: new Date(),
    endDate: new Date()
  });
  // 每次改变了其中一个值,都更新时间限制
  $('#myStart').on('change', function () {
    $('#myEnd').datetimepicker('setStartDate',$('#myStart').val());
  });
  $('#myEnd').on('change', function () {
    $('#myStart').datetimepicker('setEndDate',$('#myEnd').val());
  });
 // 重置内容并解除限制
  $('#reset').click(function () {
    $("div input").val("");
    $('#myStart').datetimepicker('setEndDate',new Date());
    $('#myEnd').datetimepicker('setStartDate',new Date(-8639968443048000));
  });