jQuery UI DatePicker 从和到

Question

我有类似下面的内容，并且想确保从日期开始不会超过不可选择的日期（即使在更改日期之后），反之亦然。

从： <input type="text" id="xx_from" value="<?php echo $date_from; ?>" />

到： <input type="text" id="xx_to" value="<?php echo $date_to; ?>" />

$j("#xx_from").datepicker({
      dateFormat: 'yy-mm-dd',
      maxDate: $j("#xx_to").val(),
      onSelect: function(){
        $j("#xx_to").datepicker( "refresh" );
      }
  });

  $j("#xx_to").datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: $j("#xx_from").val(),
      onSelect: function(){
        $j("#xx_from").datepicker( "refresh" );
      }
  });

Answer 1

如果你看到文档。您的疑问可以得到解决。您只需要在 中进行设置minDate和maxDate选项datepciker。这是代码

$(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });

Js 小提琴演示