Jquery UI datepicker. Disable array of Dates

Question

I have been trying to search for a solution to my Jquery ui datepicker problem and I'm having no luck. Here's what I'm trying to do...

I have an application where i'm doing some complex PHP to return a JSON array of dates that I want BLOCKED out of the Jquery UI Datepicker. I am returning this array:

["2013-03-14","2013-03-15","2013-03-16"]

Is there not a simple way to simply say: block these dates from the datepicker?

I've read the UI documentation and I see nothing that helps me. Anyone have any ideas?

[Disable specific dates in jquery](http://stackoverflow.com/questions/1584794/disable-specific-dates-in-jquery) — Sen Jacob, Mar 14 '13 at 03:56
[jquery-ui datepicker disable specific days](http://stackoverflow.com/questions/677976/jquery-ui-datepicker-disable-specific-days) — Sen Jacob, Mar 14 '13 at 03:56
[Can the jquery-ui datepicker be made to disable saturdays, sundays and holidays](http://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holidays) — Sen Jacob, Mar 14 '13 at 03:57
[Datepicker for web page that can allow only specific dates to be clicked](http://stackoverflow.com/questions/1890418/datepicker-for-web-page-that-can-allow-only-specific-dates-to-be-clicked/1962849) — Sen Jacob, Mar 14 '13 at 03:58
Can someone signpost me to similar questions but using Materialize datepicker? — naz786, Jan 28 '18 at 18:27

score 223 · Accepted Answer · edited Oct 31 '13 at 11:30

223

You can use beforeShowDay to do this

The following example disables dates 14 March 2013 thru 16 March 2013

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Demo: Fiddle

edited Oct 31 '13 at 11:30

Sean

14,359
13
74
124

answered Mar 14 '13 at 03:42

Arun P Johny

384,651
66
527
531

1

I KIND OF see where you're going with that. How would I incorporate my array of dates though. – Daniel White Mar 14 '13 at 03:56
14

WOW. You're a freaking genius bro. I don't know why this isn't already in the stack overflow posts for this question since its been asked a million times. All the examples posted above are too complicated, this is nice and simple. 5 stars. Thanks. – Daniel White Mar 14 '13 at 04:04
i have downloaded the code http://jqueryui.com/download/#!version=1.10.3&components=1000000000001000000000000000000000 but when i am integrating the above code in it its not working pls help – Sam Jan 18 '14 at 03:59
1

One upvote is not enough. Some people make things way more complicated than they need to be. Thank you so much for a simple, working snippet. Very useful. – kingsfoil May 23 '14 at 18:17
Additional notes: using Date objects in the array would not work; for some reason, two Date objects with the same value are not matched when using indexOf (or jQuery.inArray for old browsers compat). Also months in Date objects are 0-based instead of 1-based, which is one more thing to look out for in your backend or template code. – merwok Dec 18 '14 at 01:30
7

If you also want do exclude weekends besides these custom dates, replace the return line by this: `return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);` – Pablo S G Pacheco Jun 15 '16 at 21:19
Why can't I fav this? – Sergio A. Jan 22 '20 at 13:30
Hi, how can I gray out weekends(Saturdays and Sundays) along with specific dates? – CodeForGood Dec 21 '20 at 17:03

score 20 · Answer 2 · answered Apr 30 '14 at 19:15

20

IE 8 doesn't have indexOf function, so I used jQuery inArray instead.

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
    }
});

answered Apr 30 '14 at 19:15

Tripex

201
2
2

6

@ChristopherStrydom you'd be surprised how many people still use it. – euther Aug 11 '14 at 22:36
3

This is because IE8 is the newest IE browser which will run on WinXP (SP3). – JosephK Aug 23 '14 at 08:44
It does however support the indexOf() function on a string for finding the position of a substring in that string. – Wezy Mar 26 '15 at 12:53

score 12 · Answer 3 · edited May 03 '19 at 09:01

If you also want to block Sundays (or other days) as well as the array of dates, I use this code:

jQuery(function($){

    var disabledDays = [
       "27-4-2016", "25-12-2016", "26-12-2016",
       "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
    ];

   //replace these with the id's of your datepickers
   $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
      beforeShowDay: function(date){
         var day = date.getDay();
         var string = jQuery.datepicker.formatDate('d-m-yy', date);
         var isDisabled = ($.inArray(string, disabledDays) != -1);

         //day != 0 disables all Sundays
         return [day != 0 && !isDisabled];
      }
   });
});

score 1 · Answer 4 · edited Jun 18 '15 at 06:49

1

$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});

edited Jun 18 '15 at 06:49

rink.attendant.6

44,500
61
101
156

answered Jun 18 '15 at 06:26

user38156

77
5

score 1 · Answer 5 · answered Oct 12 '16 at 20:08

beforeShowDate didn't work for me, so I went ahead and developed my own solution:

$('#embeded_calendar').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker('getDate');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }

Can we do this same thing on dateRangePicker?? – Sunil Rawat Apr 28 '17 at 14:47 — Sunil Rawat, Apr 28 '17 at 14:47

score 1 · Answer 6 · answered Mar 22 '17 at 10:10

1

For DD-MM-YY use this code:

var array = ["03-03-2017', '03-10-2017', '03-25-2017"]

$('#datepicker').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [ array.indexOf(string) == -1 ]
    }
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}

answered Mar 22 '17 at 10:10

Dierig Patrick

168
2
20

Is it possible for daterangepicker, I want to disabled an array of dates on date-range-picker?? – Sunil Rawat Apr 28 '17 at 14:48
Can you please define your question? – Dierig Patrick May 02 '17 at 06:51
I have date range picker suppose: 01/01/2017 - 31/03/2017. I want to highlighted some dates an array of custom dates dates between this range. on date-range calendar. $dates = ['02/01/2017','03/01/2017'...till] these dates. is is possible? – Sunil Rawat May 02 '17 at 07:02
like in datepicker we can use :beforeShowDay function for this purpose, what is there in date-range-picker: http://www.daterangepicker.com/ – Sunil Rawat May 02 '17 at 07:03

score 1 · Answer 7 · answered Dec 14 '17 at 14:36

If you want to disable particular date(s) in jquery datepicker then here is the simple demo for you.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>

Jquery UI datepicker. Disable array of Dates

7 Answers7

Linked

Related