jQuery日期选择器 - 签入和签出日期

时间:2015-01-20 12:32:24

标签: jquery datepicker jquery-ui-datepicker

我有一个表单,允许用户选择签入和签出日期。目前的行为是,如果用户选择2015年3月1日和登记入住日期,则退房日期也会自动更改为2015年3月1日。

我有实时验证,以确保登记入住和退房日期与我们的最短停留期不同。此行为意味着用户在与表单交互时会立即看到错误。

我想要实现的行为是:如果用户选择2015年3月1日作为登记入住日期,则退房日期将自动更改为2015年3月8日(7天,这是最低入住要求。)

我正在使用的代码如下:

<script type="text/javascript">
        jQuery(document).ready(function(){
            var dates = jQuery( "$jquery" ).datepicker({
                dateFormat: '$dateformat',
                minDate: 0,
                beforeShowDay: function(date){
                    if($search == 2 && window.easydisabledays ){
                            return easydisabledays(date, jQuery(this).parents("form:first").find( "[name=easyroom],#room" ).val());
                    } else {
                        return [true];
                    }
                },
                $translations
                firstDay: 1,
                onSelect: function( selectedDate ){
                    if(this.id == '$instances[0]'){
                        var option = this.id == "$instances[0]" ? "minDate" : "maxDate",
                        instance = jQuery( this ).data( "datepicker" ),
                        date = jQuery.datepicker.parseDate( instance.settings.dateFormat || jQuery.datepicker._defaults.dateFormat, selectedDate, instance.settings );
                        dates.not( this ).datepicker( "option", option, date );
                    }
                    if(window.easyreservations_send_validate) easyreservations_send_validate(false, 'easyFrontendFormular');
                    if(window.easyreservations_send_price) easyreservations_send_price('easyFrontendFormular');
                }
            });
        });
    </script>

我特别关注代码的这一部分并尝试了各种选项无效:

dates.not( this ).datepicker( "option", option, date );

使用日期+ 86400 * 7会将结账日期提前约1650年。我尝试的其他变化似乎没有用。我可能会在代码中查找错误的位,或者需要在代码中添加一些内容以使其正常运行,并希望有人可以帮助或指出我正确的方向。

谢谢。

1 个答案:

答案 0 :(得分:0)

您可以在用户使用setDate()选择签到日期后设置结帐的最短日期, 这里是示例代码

(function($) {
    $('#checkin').datepicker({minDate: '0', onSelect: function(dateStr) {
        var min = $(this).datepicker('getDate'); // Get selected checkin date
        if (min) {
          min.setDate(min.getDate() + 7);
        }
        $('#checkout').datepicker('option', 'minDate', min || '0'); // Set other min, default to today
    }});

    // if you want to set max date for checkin when user select checkout date
    $('#checkout').datepicker({minDate: '0', onSelect: function(dateStr) {
        var max = $(this).datepicker('getDate'); // Get selected checkout date
        if (max) {
          max.setDate(max.getDate() - 7);
        }
        $('#checkin').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months

    }});
})(jQuery);