bootstrap-datepicker区间选择endDate不生效，结束日期早于起始日期限制失效如何解决

核心原因 #

配置不生效问题由两个错误导致：

• 资源引入错误：仅引入了bootstrap-datepicker的样式文件，未引入其JS文件，同时额外引入了jQuery UI Datepicker，两个同名为datepicker的组件产生冲突，后加载的jQuery UI Datepicker覆盖了bootstrap-datepicker的方法
• API参数不匹配：bootstrap-datepicker和jQuery UI Datepicker的配置参数、事件名完全不同，混用参数导致配置不生效

解决方案1：使用bootstrap-datepicker（适配现有Bootstrap技术栈，推荐） #

步骤1：调整资源引入 #

清理冲突资源，补全bootstrap-datepicker的JS引入，修改后资源部分如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- 新增bootstrap-datepicker的JS引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- 移除原有jQuery UI JS引入 -->

步骤2：修正初始化代码，匹配bootstrap-datepicker的API #

bootstrap-datepicker的日期格式参数为format，选中事件为changeDate，最小/最大可选日期参数为startDate/endDate，修正后代码如下：

$(document).ready(function() {
  // 起始日期选择器
  $("#clt_con_date").datepicker({
    format: 'yyyy-mm-dd',
    numberOfMonths: 1
  }).on('changeDate', function(e) {
    // 选定起始日期后，设置结束日期的最小可选值为起始日期
    $("#clt_con_end").datepicker('setStartDate', e.date);
  });
  
  // 结束日期选择器
  $("#clt_con_end").datepicker({
    format: 'yyyy-mm-dd',
    numberOfMonths: 1
  }).on('changeDate', function(e) {
    // 选定结束日期后，设置起始日期的最大可选值为结束日期
    $("#clt_con_date").datepicker('setEndDate', e.date);
  });
});

解决方案2：保留使用jQuery UI Datepicker #

如果不需要使用bootstrap-datepicker，可直接删除bootstrap-datepicker的CSS引入，原有JS代码不需要修改即可正常运行，修改后资源部分如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- 移除bootstrap-datepicker的CSS引入 -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

原有JS逻辑完全适配jQuery UI Datepicker的API，无需修改即可实现日期区间限制效果。

内容的提问来源于stack exchange，提问作者Kumaran Deva