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 是结束日期，这里是 Fiddle 期

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

这里是Modified Fiddle。

这并不完美，但它会让你接近，你可能需要处理一些格式。我使用了 'onShow' 事件，但您也可以在 onClose 中轻松执行此操作。他们的 official page 上有一个小样本，名为 Range between date#。

Jquery Ui 日期时间选择器

Jquery Ui date time picker

javascript

jquery

datetimepicker

jquerydatetimepicker