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/[email protected]/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 <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..!! đŸ™‚
