JQuery datepicker：限制日期不起作用

Question

您好，我为您制作了一个日历。

但是，比较 from 和 to 的 if 语句不正确。

规则是

让我们假设选择了 From 和 To。

那么如果From date大于To date，那么To date必须设置在比From date晚3个月的日期。但如果不是 To date 则不需要更改。

我不知道为什么 if 语句不起作用。

有调试工具吗？像 PHP 中的 debug()？

请告诉我。

谢谢

$(function () {
    $("#from").datepicker({
        maxDate: 0,
        showButtonPanel : true,
        closeText : 'Reset',
        onClose: function () {
            var today = new Date();
            var from = $('#from').datepicker('getDate');
            var from3 = from;
            from3.setMonth(from3.getMonth() + 3);//3 month limit
            var to = $('#to').datepicker('getDate');
            var tdate = $("#from").datepicker("getDate");

            if(to == ""){
                $("#from").datepicker("option", "maxDate", today);
            }
            else{
                if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
                    $.datepicker._clearDate(this);
                    $("#from").datepicker("option", "maxDate", today);
                }
                $("#from").datepicker("option", "maxDate", today);
                tdate.setMonth(tdate.getMonth() + 3);
                tdate = (tdate>today) ? today : tdate;
                $("#to").datepicker("option", "maxDate", tdate);

                if(from3 > to){
                    $('#to').datepicker('setDate', from3);
                }
                else if(from > to){
                    $('#to').datepicker('setDate', from);
                }
            }
        }
    });
    $("#to").datepicker({
        maxDate: 0,
        showButtonPanel : true,
        closeText : 'Reset',
        onClose: function () {
            var today = new Date();
            var from = $('#from').datepicker('getDate');
            var from3 = from;
            from3.setMonth(from3.getMonth() + 3);//3 month limit
            var to = $('#to').datepicker('getDate');

            if(from == ""){
                $('#from').datepicker('option', 'maxDate', today);
            }
            else{
                if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
                    $.datepicker._clearDate(this);
                    $("#to").datepicker("option", "maxDate", today);
                }
                $("#to").datepicker("option", "maxDate", today);
                if(from3 > to){
                    $('#from').datepicker('setDate', from3);
                }
                else if(from > to){
                    $('#to').datepicker('setDate', from3);
                }
            }
        }
    });
});

Answer 1

使用评论中提供的fiddle，这是我的版本：

$(function () {
    $("#from").datepicker({
        maxDate: 0,
        showButtonPanel: true,
        closeText: 'Reset',
        onClose: function (e) {
            var from = $('#from').datepicker('getDate');
            var to = $('#to').datepicker('getDate');

            if(from != null) {
                // Limit the value of "TO" date to current "FROM" date
                $("#to").datepicker("option", "minDate", from);

                // Set "TO" date to "FROM" + 3 months if it is currently less than FROM
                if(to != null && to < from) {
                    $('#to').datepicker('setDate', new Date(from.getFullYear(), from.getMonth() + 3, from.getDate()));
                }
            }
        }
    });
    $("#to").datepicker({
        maxDate: 0,
        showButtonPanel: true,
        closeText: 'Reset',
        onClose: function (e) {
            var from = $('#from').datepicker('getDate');
            var to = $('#to').datepicker('getDate');

            if(to != null) {
                // Limit the value of "FROM" date to current "TO" date
                $("#from").datepicker("option", "maxDate", to);

                // Set "FROM" date to "TO" - 3 months if it is currently more than TO
                if(from != null && from > to) {
                    $('#from').datepicker('setDate', new Date(to.getFullYear(), to.getMonth() - 3, to.getDate()));
                }
            }
        }
    });
});

在这里你可以找到一个工作演示：http://jsfiddle.net/ddg664rn/13/

在这个版本中，如果不满足条件（也就是说，如果您设置的 FORM 日期大于 TO 日期，或者 TO 日期小于 FORM 日期），日期将更改为 +/- 3 个月. 我添加了 minDate / maxDate 也限制了错误输入：在你 select 一个 FROM 日期之后，TO 日期不能小于这个值。

JQuery datepicker：限制日期不起作用

JQuery datepicker : limiting dates not working

jquery

datepicker