How to make the jQuery Multisect DatePicker always open
Today we will show you how to make the jQuery Multiselect DatePicker always open. In the previous articles, we explained how to implement multiselect date picker and how to fix the flickering issue of the multiselect date picker.
Checkout more articles on JavaScript
Set DatePicker always open
Here, we have to add div element to render the Date Picker. Also set the altField attribute in the multi date picker.
1 2 3 4 5 6 7 8 9 10 | <div id="datePick"></div> <input type="text" id="altField" /> <script> $(document).ready(function () { $('#datePick').multiDatesPicker({ altField: '#altField' }); }); </script> |
That’s all we need for the always open DatePicker. Let’s run the following example using the above code.
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 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Multisect DatePicker always open - 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>DatePicker always open - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3> <div id="datePick"></div> <input type="text" id="altField" /> <script> $(document).ready(function () { $('#datePick').multiDatesPicker({ altField: '#altField' }); }); </script> </body> </html> |
Output
Run the HTML file and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
