jquery - jQuery UIデータピッカーと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

これは、次のような方法で実行できます。データベースから日付をフェッチして配列に格納し、その後、以下の関数を使用して、特別なcssを使用して日付を強調表示します。あなたに役立つかもしれません。

$（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
    });
});