Question

我使用jQuery datepicker显示预订行程的可用天数。

var array = ['07.12.2013', '11.12.2013', '25.12.2013', '08.01.2014', '22.01.2014', '05.02.2014', '19.02.2014', '05.03.2014', '19.03.2014'];
            $('#tripDate').datepicker({
                numberOfMonths: 2,
                showButtonPanel: true,
                dateFormat: 'dd.mm.yy',
                firstDay: 1,
                minDate: +2,
                showOn: "both",
                buttonImage: "images/cal.png",
                buttonImageOnly: true,
                beforeShowDay: function unavailable(date) {
                    var f = $.datepicker.formatDate('dd.mm.yy', date)
                            var tooltipDate = "Cruise Ship AIDA";
                            var tooltipNoTour = "NO Tour on this Date!";
                            var tooltipClosed = "Marine Park Closed - NO Tours";
                    var day = date.getDay();
                    var month = date.getMonth();
                    var year = date.getYear();
                    if ($.inArray(f, array) > -1) {
                        return [false , '' , tooltipDate];
                    } else if (month == 10) {
                        return [false , '' , tooltipClosed];
                    } else if (month == 3 || month == 4 || month == 5 || month == 8 || month == 9) {
                            if ((day == 3) || (day == 5) || (day == 0)) {
                        return [false, '', tooltipNoTour];
                        }
                        else {
                                    return [true, '', ''];
                        }
                    } else {
                            if (day == 0) {
                            return [false, '' , tooltipNoTour];
                        }
                        else {
                                        return [true, '', '']; 
                        }
                    }
                }
            });

我现在想要在列表中显示接下来的7天（从今天开始），其中日期可用绿色，天数不可用红色。我怎样才能从datepicker中获取显示的日期？

Answer 1

您可以在外部函数中提取beforeShowDay函数，在DOMREADY中获取当前日期并在接下来的七天内填充一个小表。

对于每一天，您将检查当天的可行性并相应地为背景着色。

代码：

$('#tripDate').datepicker({
    numberOfMonths: 2,
    showButtonPanel: true,
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    minDate: +2,
    showOn: "both",
    buttonImage: "images/cal.png",
    buttonImageOnly: true,
    beforeShowDay: function unavailable(date) {
        return isAviable(date)
    }
});

$("#avialableDays tr td").each(function (i, o) {
    var myDate = new Date();
    myDate.setDate(myDate.getDate() + i+1);
    $(this).text(myDate.getDate());
    (isAviable(myDate)[0] == true) ? $(this).addClass('green') : $(this).addClass('red');
});

演示：http://jsfiddle.net/tAr26/2/

jQuery Datepicker - 在日历小部件外显示7天

1 个答案: