jQuery UI 日期选择器日期范围答案

【问题标题】：jQuery UI datepicker date rangejQuery UI 日期选择器日期范围
【发布时间】：2010-12-17 01:10:57
【问题描述】：

我正在尝试设置两个日期选择器，例如 http://jqueryui.com/demos/datepicker/#date-range。但是，如果您在该示例中手动输入日期，则可能会破坏代码。例如选择起始日期，然后选择器会阻止您选择起始日期之前的日期，但您可以手动输入更早的截止日期。

我在这里设置了例子http://jsfiddle.net/Ruhley/s3h5L/

【问题讨论】：

您的要求对我来说并不明显。
演示中的两个 jquery 日期选择器。但是，如果您手动输入日期，则开始日期必须在结束日期之前的规则可能会被打破。我不知道如何解决这个问题

标签： jquery jquery-ui

【解决方案1】：

第一个想法
- 使用beforeShow 而不是onSelect 来设置最大/最小日期范围。您仍然可以手动输入错误的值，但一旦您尝试打开日期选择器，它就会自动更正。
- 为避免手动篡改，您可以将字段设为readonly。
第二个想法
- 使用beforeShow，同时对字段的change 事件进行一些手动检查。 (http://jsfiddle.net/s3h5L/4/)

【讨论】：

【解决方案2】：

这对我来说没问题，但点击一次后无法更改日期。（因为失误）。我猜在日期选择器中所有日期都可以选择而不是未来日期

<script>    
$(function() {
    var dates = $( "#datepicker1, #datepicker2" ).datepicker({
        changeMonth: true, changeYear: true,dateFormat: "yy-mm-dd",


        beforeShow: function( ) {
            var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
            var option = this.id == "from" ? "maxDate" : "minDate";
            var selectedDate = $(other).datepicker('getDate');

            $(this).datepicker( "option", option, selectedDate );
        }
    }).change(function(){
        var other = this.id == "from" ? "#datepicker2" : "#datepicker1";

        if ( $('#datepicker1').datepicker('getDate') > $('#datepicker2').datepicker('getDate') )
            $(other).datepicker('setDate', $(this).datepicker('getDate') );
    });
});
</script>

【讨论】：