Select multiple Dates in jQuery DatePicker
In this article, you will learn how to select multiple dates in jQuery DatePicker. There are so many libraries are available to implement the DatePicker but here we will show you how to implement the date picker for multiple date selection.
Checkout more articles on JavaScript / jQuery
Demo Application
Steps to implement datepicker for multiple date selection
1. Add jQuery library for datepicker
Let’s add the following libraries to implement the datepicker.
1 2 3 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script> |
2. Import datepicker CSS
To design the picker, use the following CSS links.
1 | <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> |
3. Initialize the multiselect datepicker
First add the text input field to bind the datepicker.
1 | <input type="text" id="datePick" /> |
Now initialize the datepicker for multiple dates selection.
1 2 3 4 5 | <script> $(document).ready(function () { $('#datePick').multiDatesPicker(); }); </script> |
4. Output
Let’s combine all code together and see how it works.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="en"> <head> <title>Select multiple Dates in jQuery DatePicker - Clue Mediator</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> body { font-family: Arial, Helvetica, sans-serif; } input { width: 300px; padding: 7px; } .ui-state-highlight { border: 0 !important; } .ui-state-highlight a { background: #363636 !important; color: #fff !important; } </style> </head> <body> <h3>Select multiple Dates in jQuery DatePicker - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3> <input type="text" id="datePick" /> <script> $(document).ready(function () { $('#datePick').multiDatesPicker(); }); </script> </body> </html> |
Open the HTML page in browser and check the output.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
Hello,
this is very usefull to me.
I have a simple question. How can i format output dates so they show up as dd/mm/yyyy ?
Thank you very much
You can set the option to format the date. Use the following code to format the date.
$('#datePick').multiDatesPicker({ dateFormat: 'dd/mm/yy' });Hope this helps.
Pls how do I get the selected dates from the input to avoid get error error parsing date string comma
You have to manually massage it using pure JS code.
is there also a way how i can use the result for save into a database ?(php)
You can split the data by comma and store the multiple dates in the database. Or you can also store the entire string in the database.
if you are in a different month an select more than 2 dates it redirects you to the current month after how can i avoid that?
Here you will find the solution.
https://www.cluemediator.com/how-to-fix-the-flickering-issue-of-the-jquery-multi-datepicker