Question

我正在使用日期选择器来选择酒店日期。我需要使用datepicker来禁止用户在两个日历中选择同一天这里是jsfiddle

这是它应该如何工作： - 您无法添加低于“自”日期的“至”日期 - 您不能在“到”和“从”日期选择同一天

这是我的代码：

$( "#booking-from" ).datepicker({
    defaultDate: "+1w",
    minDate: 0,
    firstDay: 0,
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function( selectedDate ) {
        //$( "#booking-to" ).datepicker( "option", "minDate", selectedDate );           
        /*var day1 = $("#booking-from").datepicker('getDate').getDate() + 1;                 
        var month1 = $("#booking-from").datepicker('getDate').getMonth();             
        var year1 = $("#booking-from").datepicker('getDate').getFullYear();
        year1 = year1.toString().substr(2,2);
        var fullDate = day1 + "-" + month1 + "-" + year1;*/         

        $( "#booking-to" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#booking-to" ).datepicker({
    defaultDate: "+1w",
    minDate: '+2d',
    changeMonth: true,
    firstDay: 0,
    dateFormat: 'dd-mm-yy',
    numberOfMonths: 1,
    onClose: function( selectedDate ) {
        //$( "#booking-from" ).datepicker( "option", "maxDate", $('#booking-to').datepicker('getDate') );
    },
    onSelect: function (){
        calculateBooking();
    }
});

$("#booking-from").datepicker('setDate', '+1');
$("#booking-to").datepicker('setDate', '+8');

我该怎么办？

Answer 1

如果您将日期格式更改为ISO（yy-mm-dd），则可以利用JavaScript Date对象并轻松添加其他日期：

var actualDate = new Date(selectedDate);
var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+1);  
$( "#booking-to" ).datepicker( "option", "minDate", newDate );

工作演示：http://jsfiddle.net/h3wGx/1/

如果您想保留原始日期格式，可以使用jQuery Datepicker的altFormat选项：http://api.jqueryui.com/datepicker/#option-altFormat

Answer 2

在onClose datepicker的from事件中使用这三行。这不需要对dateformat进行任何更改。

onClose: function( selectedDate ) {         
    var minDate = $(this).datepicker('getDate');
    var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
    $( "#booking-to" ).datepicker( "option", "minDate", newMin );
}

jsfiddle demo

修改

如果您想要相同的行为，则在onClose选择器的to事件中包含此相反的行为。

onClose: function( selectedDate ) { var maxDate = $(this).datepicker('getDate'); var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1)); $( "#booking-from" ).datepicker( "option", "maxDate", newMax); }

updated fiddle

jquery.ui datepicker范围不允许选择当天

2 个答案: