jQuery UI DatePicker: How to Disable (Make Non-Selectable) Required Dates in Date Picker

jQuery in Action: Build 15 jQuery Projects

jQuery UI in Action: Build 9 jQuery UI Projects

Hands-On jQuery: jQuery Examples

Find all our Udemy courses here:

To learn jQuery from scratch and to increase your productivity as a web developer, click this link!!

jQuery UI DatePicker: Make Required Dates Disabled (Non-Selectable)

It is so easy to add a date picker with jQuery UI Datepicker widget. You just need to use the datepicker method. The Datepicker widget offers a number of options to customize your date picker. Many times, you will have to make some of the dates disabled or non-selectable. If you are developing an appointment form where you should not give appointments on holidays or Sundays. In that case, it would be better to disable those dates so that user will not select those dates even by mistake. You can accomplish this using beforeShowDay option. You need to return an array where the first item in the array needs to be true or false based on whether you want the date selectable (true) or non-selectable (false). In this video, we will make all Saturdays and Sundays as well as January 1st non-selectable.

If you do not know how to write jQuery code easily and simply, see this video tutorial.

To know how to mark holidays in jQuery UI datepicker, see the video at

To know how to enable dates before/after specific dates in jQuery UI datepicker

To know how to format selected date in jQuery UI datepicker

[eduardoromero]

This video is great to start understanding how useful is the datepicker in jQuery. I have been trying to figure out the way for the calendar to only let the user select Mondays every two weeks. The week part is where I am completely stuck. Any references that you might share? Thank you!! I hope this comments are still reviewed.

[vytautelipeikaite]

Helped a lot! I was searching everywhere for some simple instruction about how to use it and everything became clear after this video! Thank you!

[pedrogarciarodenas]

Thank you I have understand the easy way to run this property Datepicker and I applied to my project.

[agustincarranza]

thank you very much! you don't know how much that video helped me

[drunkmemer]

Hi, i want to disable specific time on specific day in datetimepicker function. Is it possible? Help me

[alanrobbo]

Yes, very nice, But, you left out the Most important thing, How do you get the Date into a Variable so as we can use it?

[amirrezarabiee]

thanks.
now how can i disable dates from database?

[zakistu]

thank you for this tutorial and i want to ask you  if i can  disable all before dates, of date tody so can i do it with jquery ui 

[ganzatambaheritier]

thank you but i want to disable the date from database i selected before

[alexandersemen]

does not work! TypeError: $( "#search-query" ).autocomplete is not a function. (In '$( "#search-query" ).autocomplete({source: availableTags, minLength: 2})', '$( "#search-query" ).autocomplete' is undefined)

[zakistu]

sorry date is always < than current new date()

[santoshvishwakarma]

datepicker is not a function please help me