jQuery UI日期选择器日期范围

Question

我想设置两个日期选择器，类似于这个网站上的例子http://jqueryui.com/demos/datepicker/#date-range。 但是如果您在示例中手动输入日期，可能会破坏代码。例如，选择一个开始日期，然后选择结束日期时，选择器会阻止您选择早于开始日期的日期，但是您仍可以手动输入一个更早的结束日期。

我在这里设置了一个示例http://jsfiddle.net/Ruhley/s3h5L/。

- Timothy Ruhle

---

我不明白你在问什么。 - Incognito

两个 jQuery 日期选择器，就像演示中的一样。但是如果您手动输入日期，则可以打破从日期必须在到日期之前的规则。我无法弄清楚如何解决这个问题。 - Timothy Ruhle

Answer 1

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

- Gabriele Petrioli

Answer 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>

- Thilanka De Silva