Select Multiple Dates in jQuery Date Picker

Introduction

jQuery date picker is one of the popular date picker in websites. Sometimes we get requirement to select multiple dates in jQuery date picker. For example, there is a requirement of a meeting that will be happen for 2-3 days and you want to select dates for meeting in your webpage. For this here's a blog that would help you to implement the same.

 

In order to implement multiple date selection in jQuery date picker follow below steps:

 

Step 1:

Add the following js and css references in a web page.

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>
   <script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"/>

Step 2:

Add textbox where we can see date.

<input type="text" id="datePick" />

Step 3:

Lastly, add the following javascript code to display date picker on focus of textbox. Here multiDatesPicker() method is used to provide facility to select multiple dates which is injected with datePick(id of textbox). This method is defined in jquery-ui.multidatespicker.js file which is added in Step 1.

$(document).ready(function(}{
    $('#datePick').multiDatesPicker();
});

Output

Figure 1 shows how to select multiple dates. We added August 25-27 and appended dates as comma separated dates. If you by mistake choose wrong date August 19 and you want to remove then click the same date again on date picker, it will remove automatically the date from textbox.

 

 Figure 1: Output of select multiple dates

 

Check this at http://jsfiddle.net/3t4j9/

 

Conclusion

In this blog we discussed how to implement multiple selected date in jQuery date picker.

 

Happy Coding!!