CODEWITHSUNDEEP
javascriptphpjqueryjquery-uijquery-ui-datepicker
Ah Bui
Ah Bui

Reputation: 73

Disable holiday, sundays and past dates inside jQuery UI datepicker

I'm in creating appointment form with jQuery datepicker. I've search around but seems that I can't combine all function I want in the beforeshowday. What I want from the datepicker is disabled all date before today (yesterday and the rest of it because you can't make appointment at date before today it must be later), then disabled on every Sunday (its non working day) and public holiday (this one using array). What I saw from others is the jQuery are specifically for only one function like public holiday it just an array, but how about disabled previous day and sunday?

I tried to follow this articles http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/ but I don't know how to combine it. Can someone show me how?

I have this to disabled on every Sunday

 function disabledSunday(date) {
     var day = date.getDay();
     return [(day != 0), ''];
 }
 $('#datepicker').datepicker({
     dateFormat: 'mm-dd-yy',
     beforeShowDay: disabledSunday
 });

This one for alldates till today

 var date = new Date();
 var m = date.getMonth(),
     d = date.getDate(),
     y = date.getFullYear();
 // Disable all dates till today
 $('#datepicker').datepicker({
     minDate: new Date(y, m, d),
     dateFormat: 'mm-dd-yy',
 });

This one is for specific dates such as public holiday

 // Disable a list of dates
 var disabledDays = ["5-31-2013", "6-01-2013"];

 function disableAllTheseDays(date) {
     var m = date.getMonth(),
         d = date.getDate(),
         y = date.getFullYear();
     for (i = 0; i < disabledDays.length; i++) {
         if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1) {
             return [false];
         }
     }
     return [true];
 }
 $('#datepicker').datepicker({
     dateFormat: 'mm-dd-yy',
     beforeShowDay: disableAllTheseDays
 });

How to combine these three function into one, I'm not much into Jquery and javascript

Upvotes: 2

Views: 4955

Answers (4)

Salman Arshad
Salman Arshad

Reputation: 272026

You can use minDate option to disable past dates. In addition, you can use beforeShowDay option to check the other two conditions**.

$("#datepicker").datepicker({
        minDate: 0,
        beforeShowDay: function (date) {
            // it is possible to write the following function using one line
            // of code; instead, multiple if/else are used for readability
            var ok = true;
            if (date.getDay() === 0) { // is sunday
                ok = false;
            } else {
                var dateStr = $.datepicker.formatDate("m-dd-yy", date);
                if ($.inArray(dateStr, disabledDays) >= 0) { // is holiday
                    ok = false;
                }
            }
            return [ok, ""];
        }
    });
});

** Actually it is possible to check all three conditions in that function.

Upvotes: 1

hammad
hammad

Reputation: 21

Try this
$("#datepicker").datepicker({ minDate: 0 });

Upvotes: 1

Rajeev Ranjan
Rajeev Ranjan

Reputation: 4142

try this :- html code : <input id="txtDate" />

function disabledays(date) {
    var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        //if u have to disable a list of day
         var removeDays = ["2013-6-11","2013-6-31" ];
         if ($.inArray(ymd, removeDays) >= 0) {
        return [false];
    } else {
        //Show accept sundays
        var day = date.getDay();
        return [(day == 1 || day == 2 || day == 3 || day == 4 ||day == 5 ||day == 6 )];
    }
}

$(function () {
    $('#txtDate').datepicker({
        beforeShowDay: disabledays
    });
});

Upvotes: 3

Yasir Ahmed
Yasir Ahmed

Reputation: 533

May u will find your slution here

http://jqueryui.com/datepicker/#min-max

Upvotes: 0

Related Questions