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 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.

Add css cdn link to link html tag
" //"

Add js cdn link to script html tag

Now create html input tab with label.

Finally add jquery script just below of input tag.

// we will maintain array of dates
var dates = new Array();

function addNewDate(date) {
if (jQuery.inArray(date, dates) < 0) 

function removeExistDate(index) {
dates.splice(index, 1);

// Add new date if we need otherwise remove it
function addOrRemoveDates(date) {
var index = jQuery.inArray(date, dates);
if (index >= 0) 

// Takes a 1-digit number and inserts a zero before it
function padingOnNumber(number) {
var ret = new String(number);
if (ret.length == 1) 
ret = "0" + ret;
return ret;

$( "#multidate" ).datepicker({
onSelect: function (dateText, inst) {
// implode the dates array with comma
$( "#multidate" ).val(dates.join(','));

beforeShowDay: function (date) {
var year = date.getFullYear();								
var month = padingOnNumber(date.getMonth() + 1);
var day = padingOnNumber(date.getDate());
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Highlighted the selected dates
return [true, "ui-state-highlight"];
// leave enabled all dates
return [true, ""];


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

Leave a Reply

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