javascript Jquery Ui 日期时间选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30397017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:07:45  来源:igfitidea点击:

Jquery Ui date time picker

javascriptjquerydatetimepickerjquerydatetimepicker

提问by smith

I am using jquery date time pickerand using start dateand end date.

我正在使用jquery 日期时间选择器并使用start dateand end date

When selecting same date for start dateand end dateI do not want it to allow the end datetime to be less than start datetime. How would I adjust my code?

选择相同的日期时start dateend 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');
});

here fdate is start date and tdate is end date and here is Fiddleof the issue

这里 fdate 是开始日期,tdate 是结束日期,这里是问题的小提琴

采纳答案by JasonWilczak

You need to use the 'setOptions' method for each timepicker:

您需要为每个时间选择器使用“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');    

Here is the Modified Fiddle.

这是修改后的小提琴

This is not perfect, but it will get you close, you may need to handle some of the formatting. I used the 'onShow' event, but you could easily do it in the onClose, as well. There is a small sample on their official pagecalled Range between date#.

这并不完美,但它会让你接近,你可能需要处理一些格式。我使用了 'onShow' 事件,但您也可以在 onClose 中轻松完成。在他们的官方页面上有一个 名为Range between date#的小样本。