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 DEMO

使用bootstrap-datepicker创建相关的datepickers

2 个答案: