Question

基本上我要做的是创建两个DatePicker字段。第一个是离开日期，第二个是返回日期。因此，例如，如果某人正在寻找一个5晚住宿的假期，当他们加载页面时，日期将如下所示：

01/12/2010 |日历图标 07/12/2010 |日历图标

对于离开日期，您可以选择任何日期（今天日期或任何未来日期）。当您点击返回日期时，您只能选择离开日期后五晚的日期。

我几乎通过阅读各种其他Stack Overflow文章的方式实现了这一功能。这是我正在使用的代码：

$().ready(function() {
    $('.dDate, .rDate').datepicker({
        showOn: 'both',
        buttonImage: "<?=$http?>layout_images/calendar.gif",
        buttonImageOnly: true,
        beforeShow: customRange,
        buttonText: 'Open Calendar',
        firstDay: 1,
        dateFormat: 'D d M yy',
        onSelect: function(date) {
            date = $(this).datepicker('getDate');
            $('#returningdate').val($.datepicker.formatDate('D d M yy', date));
        }
    });
});

function customRange(a) {
    var b = new Date();
    var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
    if (a.id == 'returningdate') {
        if ($('.dDate').datepicker('getDate') != null) {
            c = $('.dDate').datepicker('getDate');
        }
    }
    return {
        minDate: c
    }
}

此代码执行以下操作：

如果我在离开日期字段中选择01/12/2010。它会在01/12/2010自动填充返回日期。

在离开日期字段中，我可以选择任何日期（今天和更高日期），现在在返回日期我无法选择2010年12月1日之前的日期。

但我想要发生的是当我在离开日期选择01/12/2010时，它将自动添加5晚并返回日期07/12/2010并且不允许在此之前的任何一天地选择。

有没有简单的方法来修改上面的代码以这种方式工作？

非常感谢，

Quintin Hobson

Answer 1

这是我找到的解决方案：

    $(document).ready(function() {
        $('.dDate, .rDate').datepicker({
            showOn: 'both',
            buttonImage: '<?=$http?>layout_images/calendar.gif',
            buttonImageOnly: true,
            beforeShow: customRange,
            buttonText: 'Open Calendar',
            firstDay: 1,
            dateFormat: 'D d M yy',
            onSelect: function(date) {
                date = $(this).datepicker('getDate');
                if($(this).attr("id") != 'returningdate'){
                    var returnDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 6);
                    $('#returningdate').val($.datepicker.formatDate('D d M yy', returnDate));
                }
            }
        });
    });

    function customRange(a) {
        var returnDateMin;
        var b = new Date();
        var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
        if (a.id == 'returningdate') 
        {
            if ($('.dDate').datepicker('getDate') != null) {
                c = $('.dDate').datepicker('getDate');
            }
            returnDateMin = new Date(c.getFullYear(), c.getMonth(), c.getDate() + 6);
        }
        else
        {
            returnDateMin = c;
        }
        return {
            minDate: returnDateMin
        }
    }

jQuery UI DatePicker - 离开日期和返回日期

1 个答案: