How to use multiple JQuery UI Date Picker or Datepicker in HTML or JSP page

We often needs to use multiple JQuery date picker in one HTML or JSP page,
classical example is online flight booking for return trips, where you need to
pick departure date and arrival date from two separate datepickers. While
designing HTML forms either statically or dynamically using JSP, you may want to
associate date picker with multiple input text field, paragraph or any other
HTML elements. By using JQuery UI and some help from CSS ID and class
selector, we can easily use multiple datepicker in one HTML page. All you need
to do is, declare a CSS class say .datepicker and apply
that class to all HTML elements which needs date picker, for example we have
associated date picker with 4 input text fields, which has .datepicker class. By
using a class, it becomes extremely easy to select all
those elmeent using JQuery
class selector, and once you got all those element, you can just call datepicker() methos.
This method does all the hard-work and associate a date picker object with
selected items, that's it. Now you are ready to use multiple date picker in
your HTML or JSP page, let's see the complete code. By the way if you are just
starting with jQuery than I highly recommend Head First Query, it’s easy to read  and
contain some non trivial example to learn jQuery quickly.

HTML
Code

Here is our HTML page, which has four datepickers to pick different
dates. These multiple date pickers are associated with input tag, so that when
you select a particular date from date-picker, it appear in those input text-fields. By the way, If you wan to build highly interactive web application
using jQuery UI, you can learn  a lot
from jQuery UI 1.8: The User Interface Library for jQuery,  one of the finest resource on jQuery

html>

lang="en">

 
charset="utf-8"
/>

 

 
rel="stylesheet"
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"
/>

 

 

 

 
rel="stylesheet"
href="/resources/demos/style.css"
/>

 

 

 

 

Birth Date: type="text" class="datepicker" />

School Date:
type="text" class="datepicker" />

Graduation
Date: type="text" class="datepicker" />

Job Start
Date: type="text" class="datepicker" />

Marriage
Date: type="text" class="a" />

Let's see how they look like if you open this HTML page in browser

1) HTML Page with multiple date picker attached to input text fields

2) HTML page with jQuery UI DatePicker widget selected

3) jQuery UI multiple Date Picker object

4) DatePicker object is not attached to last input field 

 

If you noticed CSS class for last
textfield is not date picker instead a, and that's why datepicker is not attached
to this input textfield. By applying this technique you can add as many
datepicker as you need in your HTML or JSP page. It's very common since several
application needs start and end date e.g. while doing online booking for
flights, for return trips, we specify departure and return date etc. When I see
this kind of solution, my respect to JQuery and JQuery UI teams increased a
lot, they have really made web development fast and efficient, with just one
function call you have your datepicker ready to pick dates. Not only that, you
can customize your datepicker to show calendar in different way, which
best suits your need. For example you can display multiple months in a
calendar, mostly used in airline booking portal, which permits booking upto 3 months or further.
You can provide drop down menus to select month and year, while picking date
from calendar etc. If you wan to build highly interactive web application using
jQuery UI, you also refer  jQuery UI 1.8:The User Interface Library for jQuery, 
one of the finest book on jQuery UI.

Source:http://javarevisited.blogspot.com/2013/10/how-to-use-multiple-jquery-ui-date.html