90

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?

5

7 Answers 7

224

You can use beforeShowDay to do this

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

var dates = ['2013-03-14', '2013-03-15', '2013-03-16'];

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

Demo: Fiddle

8
  • 1
    I KIND OF see where you're going with that. How would I incorporate my array of dates though. Mar 14, 2013 at 3: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. Mar 14, 2013 at 4:04
  • i have downloaded the code jqueryui.com/download/… but when i am integrating the above code in it its not working pls help
    – Sam
    Jan 18, 2014 at 3: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, 2014 at 18:17
  • 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); Jun 15, 2016 at 21:19
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];
    }
});
3
  • 6
    @ChristopherStrydom you'd be surprised how many people still use it.
    – euther
    Aug 11, 2014 at 22:36
  • 3
    This is because IE8 is the newest IE browser which will run on WinXP (SP3).
    – JosephK
    Aug 23, 2014 at 8:44
  • It does however support the indexOf() function on a string for finding the position of a substring in that string.
    – Wezy
    Mar 26, 2015 at 12:53
12

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];
      }
   });
});   
1
$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});
0
1

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]; 
                });
             }
1
  • Can we do this same thing on dateRangePicker?? Apr 28, 2017 at 14:47
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, ''];
}
4
  • Is it possible for daterangepicker, I want to disabled an array of dates on date-range-picker?? Apr 28, 2017 at 14:48
  • Can you please define your question? May 2, 2017 at 6: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? May 2, 2017 at 7:02
  • like in datepicker we can use :beforeShowDay function for this purpose, what is there in date-range-picker: daterangepicker.com May 2, 2017 at 7:03
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.