Question

我正在尝试使用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 );
        }
    });

Answer 1

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

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);

以下功能改编自：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中保存日期

1 个答案: