使用 bootstrap-datepicker 创建依赖的日期选择器答案

【问题标题】：Create dependent datepickers using bootstrap-datepicker使用 bootstrap-datepicker 创建依赖的日期选择器
【发布时间】：2017-04-06 10:25:30
【问题描述】：

我需要使用https://github.com/uxsolutions/bootstrap-datepicker 的日期选择器创建两个日期选择器，以便在第一个日期选择器中选择的日期将用作第二个的开始日期。在第二个中禁用第一个日期选择器之前的日期。

第一个日期选择器的 HTML：

 <div class="col-sm-6 row-margin" id="div-last-day">
 <div class="input-group date">
 <input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>

第二个日期选择器：

  <div class="col-sm-6 row-margin" id="div-separation-day">
     <div class="input-group date">
      <input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
 </div>
  </div>

这是我的一些代码：

$("#div-last-day .input-group.date").datepicker({
            format: "dd-M-yyyy",
            todayHighlight: true,
            autoclose: true,
        });
        $('#div-last-day .input-group.date').datepicker()
        .on('changeDate', function (e) {
            var lastdate = $('#div-last-day .input-group.date').datepicker('getDate');
            var date = new Date(lastdate);
            var curr_date = date.getDate();
            var curr_month = date.getMonth();
            var curr_year = date.getFullYear();
            perfect_date = curr_date + "-" + m_names[curr_month]
            + "-" + curr_year;
            $("#div-separation-day .input-group.date").datepicker({
                format: "dd-M-yyyy",
                todayHighlight: true,
                startDate: perfect_date,
                autoclose: true,
            });
        });

这是我正在制作的小提琴https://jsfiddle.net/5tpn12L8/

小提琴第一次工作，但是当我在第一个日期选择器中更改日期时，它不会更新第二个日期选择器。

【问题讨论】：

2 个日期选择器是如何依赖的？
第二个日期选择器只允许从第一个选择的日期开始日期。

标签： javascript jquery twitter-bootstrap datepicker bootstrap-datepicker

【解决方案1】：

你可以这样做：

HTML：

<input class="form-control"  id="txtFromDate" />
<input class="form-control" id="txtToDate" />

JQUERY：

$(document).ready(function () {
    $("#txtFromDate").datepicker({
        format: 'dd/mm/yyyy',
        autoclose: 1,
        //startDate: new Date(),
        todayHighlight: false,
        //endDate: new Date()
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#txtToDate').datepicker('setStartDate', minDate);
        $("#txtToDate").val($("#txtFromDate").val());
        $(this).datepicker('hide');
    });

    $("#txtToDate").datepicker({
        format: 'dd/mm/yyyy',
        todayHighlight: true,
        //endDate: new Date()
    }).on('changeDate', function (selected) {
        $(this).datepicker('hide');
    });
});

jsfiddle DEMO

【讨论】：

【解决方案2】：

实际上时间选择器有它自己的文档，你可以用作

$('#timepicker_input').datetimepicker({
    format: "dd-M-yyyy",
    todayHighlight: true,
    autoclose: true,
    onSelect: function(dateText, inst){
        //here perform the change you want
    }
});

【讨论】：