How to use multiple DatePickers on one page?

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.

$(window).load(function(){

	$('body').on('focus',".datepicker_multi_start", function(){
		$(this).datepicker();
	});
	$("#btn").live("click", function() {
		$('#opt_table').append('
fromdate  to date ');
	});
});

here is the html code to place within < body > tag of your html.

	

	 to date   
	a

DEMO

View 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.