Can the jQuery UI Datepicker be made to disable Saturdays and Sundays and holidays

Question

I use a datepicker for choosing an appointment day   I already set the date range to be only for the next month   That works fine   I want to exclude Saturdays and Sundays from the available choices   Can this be done   If so  how

User · Answer

In the latest Bootstrap 3 version  bootstrap-datepicker js  beforeShowDay expects a result in this format     enabled  false  classes   class-name   tooltip   Holiday       Alternatively  if you don t care about the CSS and tooltip then simply return a boolean false to make the date unselectable   Also  there is no   datepicker noWeekends  so you need to do something along the lines of this   var HOLIDAYS         Ontario  Canada holidays     2017            1    1   New Year s Day            2    20   Family Day             4    17   Easter Monday             5    22   Victoria Day             7    1   Canada Day             8    7   Civic Holiday             9    4   Labour Day             10    9   Thanksgiving             12    25   Christmas   26   Boxing Day             function filterNonWorkingDays date           Is it a weekend      if    0  6   indexOf date getDay     gt   0          return   enabled  false  classes   weekend            Is it a holiday      var h   HOLIDAYS        each            date getYear     1900  date getMonth     1  date getDate               function  i  x                h   h x               if  typeof h      undefined                   return false                       if  h          return   enabled  false  classes   holiday   tooltip  h           It s a regular work day      return   enabled  true           datePicker   datepicker   beforeShowDay  filterNonWorkingDays

User · Answer

For Saturday and  Sunday You can do something like this                   orderdate   datepicker                                  daysOfWeekDisabled   0 6

User · Answer

The datepicker has this functionality built in        datepicker    datepicker     beforeShowDay    datepicker noWeekends       http   api jqueryui com datepicker  utility-noWeekends

User · Answer

selector   datepicker   beforeShowDay  highlightDays           var dates    new Date  1 1 2011    new Date  1 2 2011      function highlightDays date         for  var i   0  i  lt  dates length  i              if  date - dates i     0                return  true      TOOLTIP                        return  false

User · Answer

In this version  month  day  and year determines which days to block on the calendar     document  ready function       var d           new Date      var natDays       1 1 2009   1 1 2010   12 31 2010   1 19 2009       function nationalDays date        var m   date getMonth        var d   date getDate        var y   date getFullYear         for  i   0  i  lt  natDays length  i            if   m    natDays i  0  - 1   amp  amp   d    natDays i  1    amp  amp   y    natDays i  2                    return  false                     return  true         function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date         if  noWeekend 0             return nationalDays date           else           return noWeekend                function              datepicker   datepicker          minDate  new Date d getFullYear    1 - 1  1         maxDate  new Date d getFullYear   1  11  31          hideIfNoPrevNext  true        beforeShowDay  noWeekendsOrHolidays

User · Answer

The solution here that everyone likes seems to very intense    personally I think it s much easier to do something like this          var holidays     12 24 2012    12 25 2012    1 1 2013                 5 27 2013    7 4 2013    9 2 2013    11 28 2013                 11 29 2013    12 24 2013    12 25 2013                 requestShipDate    datepicker               beforeShowDay  function date                   show   true                  if date getDay      0    date getDay      6  show   false    No Weekends                 for  var i   0  i  lt  holidays length  i                          if  new Date holidays i   toString      date toString     show   false    No Holidays                                   var display    show     show      No Weekends or Holidays     With Fancy hover tooltip                  return display                              This way your dates are human readable   It s not really that different it just makes more sense to me this way

User · Answer

The solution here that everyone likes seems to very intense    personally I think it s much easier to do something like this          var holidays     12 24 2012    12 25 2012    1 1 2013                 5 27 2013    7 4 2013    9 2 2013    11 28 2013                 11 29 2013    12 24 2013    12 25 2013                 requestShipDate    datepicker               beforeShowDay  function date                   show   true                  if date getDay      0    date getDay      6  show   false    No Weekends                 for  var i   0  i  lt  holidays length  i                          if  new Date holidays i   toString      date toString     show   false    No Holidays                                   var display    show     show      No Weekends or Holidays     With Fancy hover tooltip                  return display                              This way your dates are human readable   It s not really that different it just makes more sense to me this way

User · Answer

These answers were very helpful  Thank you   My contribution below adds an array where multiple days can return false  we re closed every Tuesday  Wednesday and Thursday   And I bundled the specific dates plus years and the no-weekends functions   If you want weekends off  add  Saturday    Sunday  to the closedDays array     document  ready function             datepicker   datepicker           beforeShowDay  nonWorkingDates          numberOfMonths  1          minDate   05 01 09           maxDate    2M           firstDay  1              function nonWorkingDates date           var day   date getDay    Sunday   0  Monday   1  Tuesday   2  Wednesday   3  Thursday   4  Friday   5  Saturday   6          var closedDates     7  29  2009    8  25  2010            var closedDays     Monday    Tuesday            for  var i   0  i  lt  closedDays length  i                  if  day    closedDays i  0                     return  false                                     for  i   0  i  lt  closedDates length  i                  if  date getMonth      closedDates i  0  - 1  amp  amp              date getDate      closedDates i  1   amp  amp              date getFullYear      closedDates i  2                     return  false                                    return  true

User · Answer

selector   datepicker   beforeShowDay  highlightDays           var dates    new Date  1 1 2011    new Date  1 2 2011      function highlightDays date         for  var i   0  i  lt  dates length  i              if  date - dates i     0                return  true      TOOLTIP                        return  false

User · Answer

You can use  noWeekends function to disable the weekend selection      function               datepicker    datepicker        beforeShowDay    datepicker noWeekends

User · Answer

You can use  noWeekends function to disable the weekend selection      function               datepicker    datepicker        beforeShowDay    datepicker noWeekends

User · Answer

For Saturday and  Sunday You can do something like this                   orderdate   datepicker                                  daysOfWeekDisabled   0 6

User · Answer

The datepicker has this functionality built in        datepicker    datepicker     beforeShowDay    datepicker noWeekends       http   api jqueryui com datepicker  utility-noWeekends

User · Answer

This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker      document  ready function       var holiDays    function          var val   null        ajax            async   false           global   false           url    getdate php            success   function  data                val   data                        return val              var natDays   holiDays split         function nationalDays date        var m   date getMonth        var d   date getDate        var y   date getFullYear         for  var i   0  i  lsquo  natDays length-1  i          var myDate   new Date natDays i          if   m     myDate getMonth         d     myDate getDate         y     myDate getFullYear                      return  false                     return  true          function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date         if  noWeekend 0             return nationalDays date           else           return noWeekend                function              shipdate   datepicker         minDate  0        dateFormat   DD  d MM  yy         beforeShowDay  noWeekendsOrHolidays        showOn   button         buttonImage   images calendar gif          buttonImageOnly  true                      Create a Database in sql and put you holiday dates in MM DD YYYY format as Varchar Put the below contents in a file getdate php     php   sql  SELECT dates FROM holidaydates    result   mysql query  sql    chkdate     POST  chkdate     str     while  row   mysql fetch array  result      str    row 0        echo  str    php    Happy Coding       -

User · Answer

There is the beforeShowDay option  which takes a function to be called for each date  returning true if the date is allowed or false if it is not   From the docs     beforeShowDay   The function takes a date as a parameter and must return an array with  0  equal to true false indicating whether or not this date is selectable and 1 equal to a CSS class name s  or    for the default presentation  It is called for each day in the datepicker before is it displayed   Display some national holidays in the datepicker       selector   datepicker   beforeShowDay  nationalDays       natDays        1  26   au     2  6   nz     3  17   ie       4  27   za     5  25   ar     6  6   se       7  4   us     8  17   id     9  7   br       10  1   cn     11  22   lb     12  12   ke       function nationalDays date        for  i   0  i  lt  natDays length  i            if  date getMonth      natDays i  0  - 1            amp  amp  date getDate      natDays i  1             return  false  natDays i  2      day                    return  true           One built in function exists  called noWeekends  that prevents the selection of weekend days       selector   datepicker   beforeShowDay    datepicker noWeekends        To combine the two  you could do something like  assuming the nationalDays function from above        selector   datepicker   beforeShowDay  noWeekendsOrHolidays       function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date       if  noWeekend 0             return nationalDays date         else           return noWeekend            Update  Note that as of jQuery UI 1 8 19  the beforeShowDay option also accepts an optional third paremeter  a popup tooltip

User · Answer

There is the beforeShowDay option  which takes a function to be called for each date  returning true if the date is allowed or false if it is not   From the docs     beforeShowDay   The function takes a date as a parameter and must return an array with  0  equal to true false indicating whether or not this date is selectable and 1 equal to a CSS class name s  or    for the default presentation  It is called for each day in the datepicker before is it displayed   Display some national holidays in the datepicker       selector   datepicker   beforeShowDay  nationalDays       natDays        1  26   au     2  6   nz     3  17   ie       4  27   za     5  25   ar     6  6   se       7  4   us     8  17   id     9  7   br       10  1   cn     11  22   lb     12  12   ke       function nationalDays date        for  i   0  i  lt  natDays length  i            if  date getMonth      natDays i  0  - 1            amp  amp  date getDate      natDays i  1             return  false  natDays i  2      day                    return  true           One built in function exists  called noWeekends  that prevents the selection of weekend days       selector   datepicker   beforeShowDay    datepicker noWeekends        To combine the two  you could do something like  assuming the nationalDays function from above        selector   datepicker   beforeShowDay  noWeekendsOrHolidays       function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date       if  noWeekend 0             return nationalDays date         else           return noWeekend            Update  Note that as of jQuery UI 1 8 19  the beforeShowDay option also accepts an optional third paremeter  a popup tooltip

User · Answer

These answers were very helpful  Thank you   My contribution below adds an array where multiple days can return false  we re closed every Tuesday  Wednesday and Thursday   And I bundled the specific dates plus years and the no-weekends functions   If you want weekends off  add  Saturday    Sunday  to the closedDays array     document  ready function             datepicker   datepicker           beforeShowDay  nonWorkingDates          numberOfMonths  1          minDate   05 01 09           maxDate    2M           firstDay  1              function nonWorkingDates date           var day   date getDay    Sunday   0  Monday   1  Tuesday   2  Wednesday   3  Thursday   4  Friday   5  Saturday   6          var closedDates     7  29  2009    8  25  2010            var closedDays     Monday    Tuesday            for  var i   0  i  lt  closedDays length  i                  if  day    closedDays i  0                     return  false                                     for  i   0  i  lt  closedDates length  i                  if  date getMonth      closedDates i  0  - 1  amp  amp              date getDate      closedDates i  1   amp  amp              date getFullYear      closedDates i  2                     return  false                                    return  true

User · Answer

If you don t want the weekends to appear at all  simply   CSS  th ui-datepicker-week-end  td ui-datepicker-week-end       display  none

User · Answer

If you don t want the weekends to appear at all  simply   CSS  th ui-datepicker-week-end  td ui-datepicker-week-end       display  none

User · Answer

In the latest Bootstrap 3 version  bootstrap-datepicker js  beforeShowDay expects a result in this format     enabled  false  classes   class-name   tooltip   Holiday       Alternatively  if you don t care about the CSS and tooltip then simply return a boolean false to make the date unselectable   Also  there is no   datepicker noWeekends  so you need to do something along the lines of this   var HOLIDAYS         Ontario  Canada holidays     2017            1    1   New Year s Day            2    20   Family Day             4    17   Easter Monday             5    22   Victoria Day             7    1   Canada Day             8    7   Civic Holiday             9    4   Labour Day             10    9   Thanksgiving             12    25   Christmas   26   Boxing Day             function filterNonWorkingDays date           Is it a weekend      if    0  6   indexOf date getDay     gt   0          return   enabled  false  classes   weekend            Is it a holiday      var h   HOLIDAYS        each            date getYear     1900  date getMonth     1  date getDate               function  i  x                h   h x               if  typeof h      undefined                   return false                       if  h          return   enabled  false  classes   holiday   tooltip  h           It s a regular work day      return   enabled  true           datePicker   datepicker   beforeShowDay  filterNonWorkingDays

User · Answer

There is the beforeShowDay option  which takes a function to be called for each date  returning true if the date is allowed or false if it is not   From the docs     beforeShowDay   The function takes a date as a parameter and must return an array with  0  equal to true false indicating whether or not this date is selectable and 1 equal to a CSS class name s  or    for the default presentation  It is called for each day in the datepicker before is it displayed   Display some national holidays in the datepicker       selector   datepicker   beforeShowDay  nationalDays       natDays        1  26   au     2  6   nz     3  17   ie       4  27   za     5  25   ar     6  6   se       7  4   us     8  17   id     9  7   br       10  1   cn     11  22   lb     12  12   ke       function nationalDays date        for  i   0  i  lt  natDays length  i            if  date getMonth      natDays i  0  - 1            amp  amp  date getDate      natDays i  1             return  false  natDays i  2      day                    return  true           One built in function exists  called noWeekends  that prevents the selection of weekend days       selector   datepicker   beforeShowDay    datepicker noWeekends        To combine the two  you could do something like  assuming the nationalDays function from above        selector   datepicker   beforeShowDay  noWeekendsOrHolidays       function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date       if  noWeekend 0             return nationalDays date         else           return noWeekend            Update  Note that as of jQuery UI 1 8 19  the beforeShowDay option also accepts an optional third paremeter  a popup tooltip

User · Answer

There is the beforeShowDay option  which takes a function to be called for each date  returning true if the date is allowed or false if it is not   From the docs     beforeShowDay   The function takes a date as a parameter and must return an array with  0  equal to true false indicating whether or not this date is selectable and 1 equal to a CSS class name s  or    for the default presentation  It is called for each day in the datepicker before is it displayed   Display some national holidays in the datepicker       selector   datepicker   beforeShowDay  nationalDays       natDays        1  26   au     2  6   nz     3  17   ie       4  27   za     5  25   ar     6  6   se       7  4   us     8  17   id     9  7   br       10  1   cn     11  22   lb     12  12   ke       function nationalDays date        for  i   0  i  lt  natDays length  i            if  date getMonth      natDays i  0  - 1            amp  amp  date getDate      natDays i  1             return  false  natDays i  2      day                    return  true           One built in function exists  called noWeekends  that prevents the selection of weekend days       selector   datepicker   beforeShowDay    datepicker noWeekends        To combine the two  you could do something like  assuming the nationalDays function from above        selector   datepicker   beforeShowDay  noWeekendsOrHolidays       function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date       if  noWeekend 0             return nationalDays date         else           return noWeekend            Update  Note that as of jQuery UI 1 8 19  the beforeShowDay option also accepts an optional third paremeter  a popup tooltip

User · Answer

In this version  month  day  and year determines which days to block on the calendar     document  ready function       var d           new Date      var natDays       1 1 2009   1 1 2010   12 31 2010   1 19 2009       function nationalDays date        var m   date getMonth        var d   date getDate        var y   date getFullYear         for  i   0  i  lt  natDays length  i            if   m    natDays i  0  - 1   amp  amp   d    natDays i  1    amp  amp   y    natDays i  2                    return  false                     return  true         function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date         if  noWeekend 0             return nationalDays date           else           return noWeekend                function              datepicker   datepicker          minDate  new Date d getFullYear    1 - 1  1         maxDate  new Date d getFullYear   1  11  31          hideIfNoPrevNext  true        beforeShowDay  noWeekendsOrHolidays

User · Answer

This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker      document  ready function       var holiDays    function          var val   null        ajax            async   false           global   false           url    getdate php            success   function  data                val   data                        return val              var natDays   holiDays split         function nationalDays date        var m   date getMonth        var d   date getDate        var y   date getFullYear         for  var i   0  i  lsquo  natDays length-1  i          var myDate   new Date natDays i          if   m     myDate getMonth         d     myDate getDate         y     myDate getFullYear                      return  false                     return  true          function noWeekendsOrHolidays date        var noWeekend     datepicker noWeekends date         if  noWeekend 0             return nationalDays date           else           return noWeekend                function              shipdate   datepicker         minDate  0        dateFormat   DD  d MM  yy         beforeShowDay  noWeekendsOrHolidays        showOn   button         buttonImage   images calendar gif          buttonImageOnly  true                      Create a Database in sql and put you holiday dates in MM DD YYYY format as Varchar Put the below contents in a file getdate php     php   sql  SELECT dates FROM holidaydates    result   mysql query  sql    chkdate     POST  chkdate     str     while  row   mysql fetch array  result      str    row 0        echo  str    php    Happy Coding       -

[javascript] Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-datepicker