Disable past date after select the date on jquery datepicker


If you want to make a schedule or booking form for your own website or commercial purpose then you should add a datepicker on you form to choose the date. Actually datepicker is most common and user friendly and way to select date in any form. So you must use bootstrap based datepicker or jquery UI datepicker. In this tutorial i will show you to disable past date after select the date on jquery datepicker. For that concept you should must have 2 datepicker on your form.

Suppose we added 7 days datepicker input and if the viewer selects as the first date 17-09-2014 only the following dates can be selected for other days…

… a total of 7 consecutive days

Example :

disable date

On that image when user selected 27-09-2014 then all other past dates are disabled to select on date picker but he can change the earlier date which is selected by himself.

So here following the HTML markup and javascript code for that :

If you want, you may write that code by PHP too simply write the following code (optional) :

If you successfully linked jQuery UI  JS and CSS then datepicker will be visible to your form  properly. Now here following the javascript code to disable past on jquery datepocker:

On the above js code there have some settings for date picker. To change the date format you should change on there

To add or delete colums you should change that link

There you can change the number of the month what you want to show on your form.


NB : Make sure to link Jquery UI properly in your practice area to show datepicker.

Here is a jsfiddle link for your reference : http://jsfiddle.net/ambiguous/Rtbph/ (Link may dead any time)


About Author

I have no more personal information to share with you but have enough experience to share with all. I am always funny