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

User · Accepted Answer

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

User · Answer

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   gt   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   amp  amp  dateParts 2     date getYear     1900                                             function getDaysfromDate datesArray                     return    map  datesArray  function  n                       return n split  -   1

User · Answer

If you want to disable particular date s  in jquery datepicker then here is the simple demo for you    lt script type  text javascript  gt      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                             lt  script gt

User · Answer

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  lt  dates length  i          if  new Date dates i   toString      date toString              return  true   highlight            return  true

User · Answer

input   datepicker      beforeShowDay  function date          var string   jQuery datepicker formatDate  yy-mm-dd   date          return   array indexOf string     -1

User · Answer

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  amp  amp   isDisabled

User · Answer

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

[jquery-ui] Jquery UI datepicker. Disable array of Dates

Examples related to jquery-ui

Examples related to jquery-ui-datepicker