JQuery UI date picker Calendar formats & collecting user selected value with minimum maximum range

By using JQuery UI we can display calendar to user for their selection of date. It is easy to create such a calendar by using JQuery user interface library.
Formatting
We can use different formats like date – month – year or in any other format. We can display weekdays in full or in three chars , similarly we can display month name in full or in short. Year can be displayed in two digit format or in four digit format.
Start day of the week
We can set the start day or first day of the week in our calendar. By default it is set to display Sunday as start day of the week.
firstDay : 0
We can assign value 0 to 6 for changing first day value to any other weekday. Saturday value is 6
Adding month and year dropdown
We can show month and year dropdown list so user can quickly navigate to any month and year in the calendar.
We can use yearRange command to limit the range of options to previous 15 years ( from current year ) or from last 10 years to next 5 years or we can specify the range in years without reference to current year.
Using maxDate and minDate
We can set the maximum date to be selected by user and minimum date to be selected by user by using maxDate and minDate. All dates beyond the maxDate and before minDate will be disabled for selection by user.
We can set the maxDate to next one week like this
maxDate : ‘+1w’
Similarly we can set next one month as maximum selection of date
maxDate : ‘+1m’
For one year 10 days
maxDate : ‘+1y+10d’
Similarly we can set minDate for the Calendar
Default selection of Date
It is not necessary that the current date will remain as default selected date, we can set it to any other date month and year by directly setting the value of the input text field of the html component.
In JQuery part also we can set the default selected date by suing setDate and defaultDate.
Collecting the user selected date
We can read the user selected date from the calendar and display them in a display area or Div tag. For this we will use change() event of the calendar and we will capture the selected date in a variable and display it using one div tag.