Blog

Select multiple dates in jQuery datepicker calendar

JQuery date-picker is a function of jQuery UI library that is using in many more websites,
Today i am bring an important and unique requirement that is selecting multi-dates in datepicker api.
Generally we use date-picker as select a particular date in input date field but some time we need multidates in single input field.
So may be you will face this type of requirement.
So now i am going to explain you , How to use or create multi date selecting functionality in jquery datepicker.
Well this very simple to understand by using datepicker callback events.
We need here to use two callback events ” onSelect “, ” beforeShowDay”.

1) onSelect function will call when you select an date.

2) beforeShowDay function will call before showing days on calendar.in this function we check if dates are selected then we disable the that dates that are selected.

Please check example by click input box :

This you can see in the example how you can select multi dates in datepicker.You can just copy and paste whole script into your footer or header or any JS file.
Add jquery ui JS and CSS file.

Now create html input tab with label.

Finally add jquery script just below of input tag.

Hurrah, now your multi date code is ready to use.
If you like my tutorial then please leave a comment.
Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Security *