javascript - Jquery Ui 日期时间选择器

Question

我正在使用jquery 日期时间选择器并使用start dateand 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 中轻松完成。他们的官方页面上有一个小样本， 名为Range between date#。