jQuery Ui日期時間選擇器

Question

我正在使用jquery日期時間選擇器，並使用start date和end date 。

當選擇相同的日期作為start date和end date我不希望它允許end date時間小於start date時間。 如何調整代碼？

$( "#fdate" ).datetimepicker({
     dateFormat: 'yy-mm-dd',timeFormat: 'HH:mm:ss',
        onClose: function( selectedDate ) {
        $( "#tdate" ).datetimepicker( "option", "minDate", selectedDate );
  }
  }).attr('readonly', 'readonly');
     $( "#tdate" ).datetimepicker({dateFormat: 'yy-mm-dd',timeFormat: 'HH:mm:ss',
  onClose: function( selectedDate ) {
     $( "#fdate" ).datetimepicker( "option", "maxDate", selectedDate );
  }
  }).attr('readonly', 'readonly');
});

這里的fdate是開始日期，而tdate是結束日期，這是問題的提琴

Answer 1

您需要為每個時間選擇器使用'setOptions'方法：

$(document).ready(function(){
    $("#fdate" ).datetimepicker({
        dateFormat: 'yy-mm-dd',
        timeFormat: 'HH:mm:ss',
        onShow: function () {
            this.setOptions({
                maxDate:$('#tdate').val()?$('#tdate').val():false,
                maxTime:$('#tdate').val()?$('#tdate').val():false
            });
        }
  }).attr('readonly', 'readonly');
  $( "#tdate" ).datetimepicker({
      dateFormat: 'yy-mm-dd',
      timeFormat: 'HH:mm:ss',
        onShow: function () {
            this.setOptions({
                minDate:$('#fdate').val()?$('#fdate').val():false,
                minTime:$('#fdate').val()?$('#fdate').val():false
            });
        }                    
  }).attr('readonly', 'readonly');    

這是改良的小提琴 。

這不是完美的方法，但是它會讓您接近，您可能需要處理一些格式。 我使用了'onShow'事件，但是您也可以在onClose中輕松地完成它。 在他們的官方頁面上有一個名為date between date＃的小樣本。