0

我正在使用日期选择器来选择酒店日期。我需要日期选择器来不允许用户在两​​个日历中选择同一天，这里是一个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');

我该怎么做？

4

2 回答 2

0

如果您将日期格式更改为 ISO ( yy-mm-dd)，您可以利用 JavaScriptDate对象并轻松添加另一个日期：

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

于 2013-08-12T14:58:12.127 回答
0

onClose在日期选择器事件中使用这三行from。这不需要对您的日期格式进行任何更改。

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

于 2013-08-12T15:02:50.827 回答