jQuery UI Datepicker - Disable specific days selected from database not from arrays

Question

Thanks in advance for your cooperation,

I'm using this JQUERY Date picker as shown in this image : http://techblog.willshouse.com/wp-content/uploads/2009/06/datepicker.jpg

and for more information : I have an ASP.net site retrieving data from SQL server 2008.. one of the admin functionalities is to change official holidays dates and save them in the DB in table Holidays

my question is: how to disable these official holidays in the datepicker , so i prevent the user to select these specific days.

following this link:

jQuery UI Datepicker - Disable specific days

but I’m afraid I can’t use this solution manner , because the official holidays can’t be listed in an array since they are changed periodically many times by the admin of the site.

So, I don’t need to add them to the array list every time the admin change them.

I mean, is there any way to disable the selected dates from the table "Holidays" in the database?

Thanks in advance,

--- and also , i try to use this answer...

    /* create an array of days which need to be disabled */

    var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

    /* utility functions */
    function nationalDays(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
            for (i = 0; i < disabledDays.length; i++) {
                            if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
                                            //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
                                            return [false];
                            }
            }
            //console.log('good:  ' + (m+1) + '-' + d + '-' + y);
            return [true];
    }
    function noWeekendsOrHolidays(date) {
            var noWeekend = jQuery.datepicker.noWeekends(date);
            return noWeekend[0] ? nationalDays(date) : noWeekend;
     }

    /* create datepicker */
    jQuery(document).ready(function() {
            jQuery('#date').datepicker({
                            minDate: new Date(2010, 0, 1),
                            maxDate: new Date(2010, 5, 31),
                            dateFormat: 'DD, MM, d, yy',
                            constrainInput: true,
                            beforeShowDay: noWeekendsOrHolidays
            });

please, can any one answer my question urgently :| – Eng.Alaa Saqallah Mar 13 '12 at 09:36 — Eng.Alaa Saqallah, Mar 13 '12 at 09:36

score 0 · Answer 1 · answered Apr 17 '12 at 04:48

Here is a way to disable specific dates from being selected: jQuery - Datepicker - Disable Specific Dates Looking at the array in this link, instead of:

var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

You would have something like:

<?php
    $result = mysql_query("SELECT `date` FROM `Holidays`;")
    foreach ($result as $holiday){
        //may need to format $holiday here before using
        $dates .= "'".$holiday."',";
    }
    //remove the last comma
    $dates = substr($dates,0,-1);
?>

var unavailableDates = [<?php echo $dates; ?>];

Perhaps someone else can provide an ASP.NET solution?

score 0 · Answer 2 · answered Oct 23 '13 at 03:44

For anyone's interest, here is how I did it with ColdFusion

<cfquery name="qHolidays" datasource="#ds#">
    SELECT holiday_date
    FROM public_hols
    ORDER BY holiday_date
</cfquery>


<cfset disabledDays = '"1-1-2000"'> 
<cfloop query="qHolidays">
    <cfset disabledDays = disabledDays & ',"' & DateFormat(holiday_date,'d-m-yyyy') & '"'>
</cfloop>

<cfoutput>
    <script type="text/javascript">
        /* create an array of days which need to be disabled */

        var unavailableDates = [#disabledDays#];
        //var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

        function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
            day = date.getDay();
            if ( $.inArray(dmy, unavailableDates) < 0 && (day > 0) && (day < 7) ) {
                return [true,"","Work Day"];
            } else {
                return [false,"","Public Holiday"];
            }
        }

        /*
        $('##iDate').datepicker({ beforeShowDay: unavailable });    
        */  

        jQuery(document).ready(function() {
            $(function() {
                $('##dateentered').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'yy-mm-dd',
                    showOn: "button",
                    buttonImage: "images/calendar.gif",
                    buttonImageOnly: true,
                    numberOfMonths: 3,
                    constrainInput: true,
                    beforeShowDay: unavailable
                });
            });
        });
    </script>
</cfoutput>

jQuery UI Datepicker - Disable specific days selected from database not from arrays

2 Answers2