php - 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 小提琴演示

Answer 2

尝试以下操作，您需要在选择开始日期和结束日期时调用一个函数来设置最小日期和最大日期。

在这里演示

// To set mindate in enddate
function customRange(input) 
{ 
return {
        minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date())
      }; 
}

// To set maxdate in startdate
function customRangeStart(input) 
{ 
return {
        maxDate:(input.id == "start_date" ? $("#end_date").datepicker("getDate") : null)
      }; 
}

$(document).ready(function() {

   $('#start_date').datepicker(
   {
       beforeShow: customRangeStart,
       maxDate: null,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });

   $('#end_date').datepicker(
   {
       beforeShow: customRange,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });
});

Answer 3

当您在选择侦听器中刷新它时，您必须在日期选择器的配置中设置最小和最大日期。