使用 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,
            });
        });

这是 fiddle 我正在 https://jsfiddle.net/5tpn12L8/

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

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 DEMO

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

Create dependent datepickers using bootstrap-datepicker

javascript

jquery

twitter-bootstrap

datepicker

bootstrap-datepicker