DatePicker is commonly used in the website when you want to get the date or time information from visitor/users.Most commonly used date picker is jQuery Datepicker.
So, Today I am going to explain about to use multiple date picker into single HTML.
Let’s understand one by one.First of all include jQuery and jQuery UI library into head tag from here.
Read about: Lazy Load Plugin for jQuery Explained
Now, Add below line of code after including the jQuery library.
1 2 3 4 5 6 7 8 9 10 11 | $('body').on('focus',".datepicker_multi_start", function(){ $(this).datepicker(); }); $("#btn").live("click", function() { $('#opt_table').append('<div>fromdate <input class="datepicker_multi_start" name="datepicker[]"/> to date <input class="datepicker_multi_start" name="datepickerto[]"/>'); }); }); |
here is the html code to place within < body > tag of your html.
1 2 3 4 5 6 7 | <form action="" method="post"> <div id="opt_table"><div> <input class="datepicker_multi_start" name="datepicker[]"/> to date <input class="datepicker_multi_start" name="datepickerto[]"/> <input type='button' ID='btn' value="ADD"> <input type="submit" name="submit" value="add"/>a </form> |
DEMO
I hope techniques explained here will give you a good start in effectively using the jQuery date picker. If you have any suggestions, use the comment section below.
Read: Run-Time Validation using jquery
As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (2)