創建使用自舉-日期選擇器

Question

我需要通過https://github.com/uxsolutions/bootstrap-datepicker所以在第一日期選擇器選擇的該日期將被用作第二的開始日期使用日期選擇器創建兩個日期選取器依賴性datepickers。第一個日期選擇器之前的日期在第二個禁用。

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

H ere是我正在處理的小提琴https://jsfiddle.net/5tpn12L8/

小提琴第一次工作，但當我在第一個日期選擇器中更改日期時，它不更新第二個日期選擇器。

Answer 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

Answer 2

實際上timepicker都有自己的文檔，你可以爲

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