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上有一个小样本，名为，日期范围为＃。