Question

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

我在此处设置了示例http://jsfiddle.net/Ruhley/s3h5L/

Answer 1

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

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>

jQuery UI datepicker日期范围

2 个答案: