在最小和最大范围jQuery ui datepicker中保存日期(Save dates in min and max range jQuery ui datepicker)

在最小和最大范围jQuery ui datepicker中保存日期(Save dates in min and max range jQuery ui datepicker)

我正在尝试使用jQuery UI datepicker创建预订日历。

我希望能够保存最小和最大范围之间的所有日期。 这意味着，当用户选择最小日期“04/16/2014”并且最大日期为“04/19/2014”时，我希望将该范围内的每一天保存到数组中。

仅保存最小和最大日期可能是不够的，因为所有不同的预订将有多个最小和最大日期。

这个数组将用于向这些日期添加一个类，如下面的代码所示。

var bookedArray = <?php echo json_encode($bookedDates); ?>; // function putting dates into the calendar function bookedDates(mydate){ var pickable=true; var displayClass ="available"; var checkdate = $.datepicker.formatDate('mm/dd/yy', mydate); for(var i = 0; i < bookedArray.length; i++) { if(bookedArray[i] == checkdate) { pickable = true; displayClass= "booked-date"; } } return [pickable,displayClass]; } // jQuery UI calendar picker $( "#from" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } });

I'm attempting to create a booking calendar using the jQuery UI datepicker.

I want to be able to save all the dates in between a min and max range. Meaning, when the user selects a min date of "04/16/2014" and max date of "04/19/2014" I want to save every day in that range to an array.

Saving just the min and max date would probably not be enough, since there will be multiple min and max dates for all the different bookings.

This array will in turn be used to add a class to those dates as is shown in the code below.

var bookedArray = <?php echo json_encode($bookedDates); ?>; // function putting dates into the calendar function bookedDates(mydate){ var pickable=true; var displayClass ="available"; var checkdate = $.datepicker.formatDate('mm/dd/yy', mydate); for(var i = 0; i < bookedArray.length; i++) { if(bookedArray[i] == checkdate) { pickable = true; displayClass= "booked-date"; } } return [pickable,displayClass]; } // jQuery UI calendar picker $( "#from" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } });

最满意答案

您可以遍历日期并将它们添加到数组中，如下所示：

var bookedDays = []; var date1 = new Date("04/19/2014"); var date2 = new Date("04/16/2014"); while(date1>=date2){ bookedDays[bookedDays.length] = getFullDate(date2); //append date to array date2.setDate(date2.getDate()+1); //increment by one day } console.log(bookedDays);

以下功能改编自： 如何在JavaScript中获取当前日期？

function getFullDate(dateObj){ var dd = dateObj.getDate(); var mm = dateObj.getMonth()+1; //January is 0! var yyyy = dateObj.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } return mm+'/'+dd+'/'+yyyy; }

You can traverse dates and add them to an array like this:

var bookedDays = []; var date1 = new Date("04/19/2014"); var date2 = new Date("04/16/2014"); while(date1>=date2){ bookedDays[bookedDays.length] = getFullDate(date2); //append date to array date2.setDate(date2.getDate()+1); //increment by one day } console.log(bookedDays);

Following function adapted from: How do I get the current date in JavaScript?

function getFullDate(dateObj){ var dd = dateObj.getDate(); var mm = dateObj.getMonth()+1; //January is 0! var yyyy = dateObj.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } return mm+'/'+dd+'/'+yyyy; }在最小和最大范围jQuery ui datepicker中保存日期(Save dates in min and max range jQuery ui datepicker)

我正在尝试使用jQuery UI datepicker创建预订日历。

我希望能够保存最小和最大范围之间的所有日期。 这意味着，当用户选择最小日期“04/16/2014”并且最大日期为“04/19/2014”时，我希望将该范围内的每一天保存到数组中。

仅保存最小和最大日期可能是不够的，因为所有不同的预订将有多个最小和最大日期。

这个数组将用于向这些日期添加一个类，如下面的代码所示。

var bookedArray = <?php echo json_encode($bookedDates); ?>; // function putting dates into the calendar function bookedDates(mydate){ var pickable=true; var displayClass ="available"; var checkdate = $.datepicker.formatDate('mm/dd/yy', mydate); for(var i = 0; i < bookedArray.length; i++) { if(bookedArray[i] == checkdate) { pickable = true; displayClass= "booked-date"; } } return [pickable,displayClass]; } // jQuery UI calendar picker $( "#from" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } });

I'm attempting to create a booking calendar using the jQuery UI datepicker.

I want to be able to save all the dates in between a min and max range. Meaning, when the user selects a min date of "04/16/2014" and max date of "04/19/2014" I want to save every day in that range to an array.

Saving just the min and max date would probably not be enough, since there will be multiple min and max dates for all the different bookings.

This array will in turn be used to add a class to those dates as is shown in the code below.

var bookedArray = <?php echo json_encode($bookedDates); ?>; // function putting dates into the calendar function bookedDates(mydate){ var pickable=true; var displayClass ="available"; var checkdate = $.datepicker.formatDate('mm/dd/yy', mydate); for(var i = 0; i < bookedArray.length; i++) { if(bookedArray[i] == checkdate) { pickable = true; displayClass= "booked-date"; } } return [pickable,displayClass]; } // jQuery UI calendar picker $( "#from" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ beforeShowDay: bookedDates, defaultDate: "+1w", changeMonth: true, changeYear: true, numberOfMonths: 2, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } });

最满意答案

您可以遍历日期并将它们添加到数组中，如下所示：

var bookedDays = []; var date1 = new Date("04/19/2014"); var date2 = new Date("04/16/2014"); while(date1>=date2){ bookedDays[bookedDays.length] = getFullDate(date2); //append date to array date2.setDate(date2.getDate()+1); //increment by one day } console.log(bookedDays);

以下功能改编自： 如何在JavaScript中获取当前日期？

function getFullDate(dateObj){ var dd = dateObj.getDate(); var mm = dateObj.getMonth()+1; //January is 0! var yyyy = dateObj.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } return mm+'/'+dd+'/'+yyyy; }

You can traverse dates and add them to an array like this:

var bookedDays = []; var date1 = new Date("04/19/2014"); var date2 = new Date("04/16/2014"); while(date1>=date2){ bookedDays[bookedDays.length] = getFullDate(date2); //append date to array date2.setDate(date2.getDate()+1); //increment by one day } console.log(bookedDays);

Following function adapted from: How do I get the current date in JavaScript?

function getFullDate(dateObj){ var dd = dateObj.getDate(); var mm = dateObj.getMonth()+1; //January is 0! var yyyy = dateObj.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } return mm+'/'+dd+'/'+yyyy; }