基于另一个日期选择器或文本框限制jQuery日期选择器中的日期

问题描述：

我有两个文本框与日期选择器挂钩。文本框用于开始日期和结束日期。第一个日期选择器设置为使用户在今天之前不能选择日期，但可以选择未来的任何日期。基于另一个日期选择器或文本框限制jQuery日期选择器中的日期

如何设置第二个日期选择器，以便它不能在第一个日期选择器中选择的日期之前选择一个日期？例如：如果今天是12/11/10，并且我选择12/15/10在第一个日期选择器中，则第二个日期选择器在12/15/10之前不应该选择任何东西。

继承人是我到目前为止有：

$("#txtStartDate").datepicker({ minDate: 0 }); 
$("#txtEndDate").datepicker({});

答

例如，在此示例代码，startDatePicker被选择为2010-12-12，startDatePicker的变化事件设置的minDate endDatePicker 2010-12-13。它在这个日期之前锁定了单元格。这是@Victor提到的一个样本..我希望它可以帮助...关心... Ozlem。

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
});

谢谢！您的“endDatePicker”选择器应该是“#endDatePicker” – greaterKing 2017-04-28 12:36:16

答

单纯从UI的角度来看，你不应该。如果用户在两个日期选择器上选择了错误的月份，并尝试选择正确的月份，则受到UI阻碍的他有50％的变化。理想情况下，您会允许错误的选择并显示一条有用的错误消息，说明结束日期应该在结束日期之后。

如果你想实现你的想法：给每个日期选择器一个"change"事件，适当地更改其他日期选择器上的选项。

非常好的一点，我正要实现这个相同的概念，然后意识到我只是使用JavaScript来显示错误！谢谢维克多！ – 2012-11-20 19:58:37

这是一个很好的建议，但是如何设置defaultDate而不是使用类似于Tin Man的技术，建议如下？这是我的解决方案。 – 2012-12-19 03:03:06

答

使用第一个日期选择器UI的“getDate”的方法，并把它传递到minDate选择第二个日期选择的：

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
});

答

更新：

只在创建时将上述设置的minDate方法。我用onSelect事件，以改变第二日期选择的这样的的minDate选项：

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
});

最简单最有用的方法。 – bodi0 2016-12-09 10:16:00

答

使用此代码：

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script>

答

试试这个男人：

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date());

答

铁皮人的解决方案添加$（ “＃txtEndDate”）后，为我工作。 datepicker（）在底部

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line

基于另一个日期选择器或文本框限制jQuery日期选择器中的日期

相关推荐