使用bootstrap-datepicker创建相关的日期选择器

Question

我需要通过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/

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

Answer 1

实际上，timepicker拥有自己的文档，您可以将其用作

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

Answer 2

您可以按照以下步骤进行操作：

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