Jquery Ui日期時間選擇器

Question

我正在使用jquery date time picker並使用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」的方法對每個timepicker的Fiddle：

$(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');  

這裏Modified Fiddle。

這並不完美，但它會讓你接近，你可能需要處理一些格式。我使用了'onShow'事件，但您也可以在onClose中輕鬆完成。他們的official page上有一個小樣本，名爲，日期範圍爲＃。