CODEWITHSUNDEEP
jquery-uijquery-ui-datepicker
programstinator
programstinator

Reputation: 1376

Can I make the jQuery datepicker display more year when using the changeYear option?

I am using the jQuery datepicker in an application which will be used, among other things, to insert and update birth dates of employees. I find it cumbersome to have to click several times in order to get to the 70's and 80', decades in which many employees are born in. Is there a way to access these 'further' years in less clicks? This is what my datepicker looks like

$("#DateOpened").datepicker({
    dateFormat: "mm/dd/yy",
    maxDate: "+0D",
    showAnim: 'slide',
    changeMonth: true,
    changeYear: true,
    'setDate': new Date(),
    onClose: function (selectedDate) {
        $("#DateClosed").datepicker("option", "minDate", selectedDate);
    }
});

Upvotes: 0

Views: 2262

Answers (2)

Barmar
Barmar

Reputation: 780851

Use the yearRange option to increase the size of the year drop-down.

yearRange: "c-30:+0"

will allow selecting a year after 1983 in one click, and the 70's in 2 clicks.

FIDDLE

However, this isn't a good UI. When the user first clicks on the menu, it's not obvious that they can go back more than 30 years by first selecting an old year and then clicking on the menu again. You can use c-100:+0 to allow the menu to contain 100 years, hopefully this wil be enough for most users.

Upvotes: 7

Praveen
Praveen

Reputation: 56501

If I understood correctly, then yes it is possible using minDate and maxDate options. Here you can set the year that has to be shown.

changeYear: true,
minDate: '-1Y',  //decrease 1 year from current year
maxDate: '+2Y'   //increase 2 from current year

Y represent year.

enter image description here

This is one shortest way to reach the year soon.

Upvotes: 0

Related Questions