jQuery Date picker is a nice option to be used a date picker control. It gives it lot of flexibility to control the behaviour of date picker based on our need & wish.

 

By default, when we place the jQuery date picker, it shows only month, where user needs to use left & right arrow button to move across months & years which can be painful if we need to choose a date from past years.

 

iquery

 

Below are some options, which we can use with jQuery date picker make it more user friendly. We just need to add these properties to our date picker function/directive.

 

1) Show Year & Month Option

year

 

2) To restrict Date Picker to current financial year:

On top of our jQuery, add following code to determine the financial year which will be applicable.

iquery1

 

Now, add below properties to jQuery date picker function to restrict the access to the current financial year only. Using the maxDate property, we are restricting the date picket to not allow selecting any future dates.

iquery2

3) To restrict the year range to allow only limited number of years:

If we want to restrict year selection list to a particular range, e.g. allow to choose previous 25 years only, then add below variable on top of jQuery.

preyear

And, then add this property to the date picker.

post year

Same way we can restrict the future years as well.

 

4) To restrict date picker for certain months, e.g. Past & future 3 months, just set the appropriate value for the minDate & maxDate properties like below:

 

min

 

5) To specify the Date Format:
If we want to specify a particular date format for date picker, we should use the property called dateFormat.

date format

 

jQuery date picker provides us various ways to handle date control. We can use combination of above properties to achieve more dynamic behaviour in our date picker control.

Virendra
Virendra
Project Manager