JQuery ui - date picker, disabling specific dates

Question

I am trying to disable specific dates using the JQuery Ui. However, I am having no luck, here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css"> <style type="text/css"> .ui-datepicker .preBooked_class { background:#111111; } .ui-datepicker .preBooked_class span { color:#999999; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Datepicker</title> <script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

Instantiate datepicker object

<script type="text/javascript"> $(function() { $( "#iDate" ).datepicker({ dateFormat: 'dd MM yy', beforeShowDay: checkAvailability }); })

Get the dates to be disabled within the calendar

 var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"]; function unavailable(date) { dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); if ($.inArray(dmy, unavailableDates) == -1) { return [true, ""]; } else { return [false,"","Unavailable"]; } } $('#iDate').datepicker({ beforeShowDay: unavailable }); </script> </head> <body> <input id="iDate"> </body> </html>

It doesn't seem to be working, any idea how I can resolve this. cheers.

Thomas · Accepted Answer · 2020-01-30 15:52:11Z

43

It looks like you're calling datepicker twice on one input. Its kind of hard to follow your code, but if you re-organize it and remove the second datepicker call, everything should work:

<script type="text/javascript"> var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"]; function unavailable(date) { dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); if ($.inArray(dmy, unavailableDates) == -1) { return [true, ""]; } else { return [false, "", "Unavailable"]; } } $(function() { $("#iDate").datepicker({ dateFormat: 'dd MM yy', beforeShowDay: unavailable }); }); </script>

Check this article: disable-dates-in-datepicker

edited Jan 30, 2020 at 15:52

Thomas

8,8592 gold badges28 silver badges54 bronze badges

answered Mar 16, 2012 at 18:08

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bobo2000 Over a year ago

Works perfectly, a quick question andrew. How can I adapt this so that instead of the unavailable dates being hard coded within the array, the dates are retrieved from a database table. cheers.

Andrew Whitaker Over a year ago

@bobo2000: That depends on your server-side technology. But I would imagine you would embed the array of excluded dates on the page on page load instead of hard coding them in the JavaScript.

bobo2000 Over a year ago

Using PHP. Will I need to query the db then populate the array with the result set?

Andrew Whitaker Over a year ago

@bobo2000: That sounds correct. I'm not very knowledgeable with PHP though. Sounds like a candidate for a new question :)

Humphrey Over a year ago

This worked but how can I do it without specifying the dates in the array , it say in need the next three days . Like if it comes to tomorrow it selects the following three like that

Deva · Accepted Answer · 2016-09-30 07:16:37Z

Helpful answer..If you want to disable a perticular day, you can do as below:

 $scope.dateOptions = { beforeShowDay: unavailable }; function unavailable(date) { if (date.getDay() === 0) { return [true, ""]; } else { return [false, "", "Unavailable"]; } }

the above will only enable Sunday and all other days will be disabled. Hope this helps.

Tyler2P · Accepted Answer · 2022-09-27 17:55:07Z

var unavailableDates = ["23-09-2022", "24-09-2022", "25-09-2022"]; $('#res_date').datepicker({ startDate: '-0m', // this for disable past days format: 'dd/mm/yyyy', todayHighlight:'TRUE', autoclose: true, datesDisabled: unavailableDates // for disable your specific days });

Antony · Accepted Answer · 2023-06-02 15:19:52Z

To flip the answer on its head for available dates you can now use the javascript includes() and return the bool value in an array.

var availableDates = ["5-6-2023", "6-6-2023", "7-6-2023"]; function available(date) { dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); return [availableDates.includes(dmy)]; } $("#iDate").datepicker({ dateFormat: 'dd MM yy', beforeShowDay: available });

The 2nd element in the array is a css class and the 3rd param is an optional tooltip (https://api.jqueryui.com/datepicker/#option-beforeShowDay)

Worth saying that as of 2023 Jquery UI is on the way out, but its still quite a nice toolset.

Collectives™ on Stack Overflow

JQuery ui - date picker, disabling specific dates

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Related