jquery - jQuery UI Datapicker 和来自 DB (asp.net) 的日期

Question

有没有办法从 DB 加载日期并将其粘贴到 datepicker 中，以便 DB 中的日期在 datepicker 中的该日期具有不同的类（颜色），或者是否有其他日历可以做到这一点。

Answer 1

下面的脚本从数据库中读取日期值并将它们作为数组传递给日历[<%=sBlockedDates%>]

实际数组示例

var holiDays = [[2012,25, 12, 'Christmas'],[2012,7, 7, 'WEEKEND Event'],[2012,7, 13, 'Some Holiday'],[2012,7, 14, 'Festival']];

UI 日历脚本

除了下面的这个脚本之外，禁用以前的日期和大于 +90 天的日期，还阻止作为数组传递的日期。您可以根据自己的逻辑更改脚本。

function BindEvents()
{
//Script for Calendar
        var holiDays = [<%=sBlockedDates%>];
        $(function () {
            $("#<%=txtBookingDate.ClientID %>").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: "-0d",
                maxDate: "+90d",
                firstDay: 0,
                beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
            });

            function noWeekendsOrHolidaysOrBlockedDates(date) {
                //var noWeekend = jQuery.datepicker.noWeekends(date);
                return setHoliDays(date);
            }

            // set holidays function which is configured in beforeShowDay
            function setHoliDays(date) {
                var day = date.getDay();
                if (day == 5 || day ==6) return [false, 'CalWeekEnd', ];

                for (i = 0; i < holiDays.length; i++) {
                    if (date.getFullYear() == holiDays[i][0]
                        && date.getMonth() == holiDays[i][1] - 1
                        && date.getDate() == holiDays[i][2]) {
                        return [false, 'holiday', holiDays[i][3]];
                    }
                }
                return [true, ''];
            }
        });
}

BindEvents();  

Answer 2

You can do this in a way like : fetch dates from database and store them in an array and after that using the below function to highlight them using your special css. May be its helpful for you.

$(function() {

  //Dates are Year, months-1 (Jan is 0,...,Dec is 11), day
    var dates = [new Date(2011, 10, 15), new Date(2011, 10, 10)];
    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (
            (dates[i].getDate() == date.getDate()) && 
            (dates[i].getMonth() == date.getMonth()) && 
            (dates[i].getFullYear() == date.getFullYear())
            ) {
                return [true,'highlight','Highlighted day'];
            }
        }
        return [true, '','All other dates'];
    }
    function pickUpDate(dateText, inst) {
        var theURL = "#"+dateText;
        //window.location = theURL; //this for opening in the same window
        window.open(theURL); //this for opening in the new window
    }
    $( "#datepicker" ).datepicker({
        beforeShowDay: highlightDays,
        onSelect: pickUpDate
    });
});