jQuery UI Datepicker set year range dropdown to 100 years

Question

Using the Datepicker the year drop down by default shows only 10 years  The user has to click the last year in order to get more years added   How can we set the initial range to be 100 years so that the user will see a large list by default         function InitDatePickers                 datepicker   datepicker               changeMonth  true              changeYear  true              showButtonPanel  true              maxDate    maxDate               minDate    minDate

User · Answer

This is a bit late in the day for suggesting this, given how long ago the original question was posted, but this is what I did.

I needed a range of 70 years, which, while not as much as 100, is still too many years for the visitor to scroll through. (jQuery does step through year in groups, but that's a pain in the patootie for most people.)

The first step was to modify the JavaScript for the datepicker widget: Find this code in jquery-ui.js or jquery-ui-min.js (where it will be minimized):

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

And replace it with this:

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

This surrounds the decades (except for the current) with OPTGROUP tags.

Next, add this to your CSS file:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

This hides the decades until the visitor mouses over the base year. Your visitor can scroll through any number of years quickly.

Feel free to use this; just please give proper attribution in your code.

User · Answer

You can set the year range using this option per documentation here http   api jqueryui com datepicker  option-yearRange  yearRange   1950 2013      specifying a hard coded year range   or this way  yearRange   -100  0      last hundred years   From the Docs      Default   c-10 c 10       The range of years displayed in the year drop-down  either relative to today s year   -nn  nn    relative to the currently selected year   c-nn c nn    absolute   nnnn nnnn    or combinations of these formats   nnnn -nn    Note that this option only affects what appears in the drop-down  to restrict which dates may be selected use the minDate and or maxDate options

User · Answer

I did this   var dateToday   new Date    var yrRange   dateToday getFullYear            dateToday getFullYear     50   and then yearRange   yrRange   where 50 is the range from current year

User · Answer

You can set the year range using this option in jQuery UI datepicker   yearRange   c-100 c 0      last hundred years and current years  yearRange   c-100 c 100      last hundred years and future hundred years  yearRange   c-10 c 10      last ten years and future ten years

User · Answer

I wanted to implement the datepicker to select the birthdate and I had troubles changing the yearRange as it doesn t seemed to work with my version  1 5   I updated to the newest jquery-ui datepicker version here  https   github com uxsolutions bootstrap-datepicker   Then I found out they provide this very helpful on-the-fly tool  so you can config your whole datepicker and see what settings you have to use   That s how I found out that the option      defaultViewDate   is the option I was looking for and I didn t find any results searching the web   So for other users  If you also want to provide the datepicker to change the birthdate  I suggest to use this code options       birthdate   datepicker       startView  2      maxViewMode  2      daysOfWeekHighlighted   1 2       defaultViewDate    year  new Date   getFullYear  -20  month  01  day  01         When opening the datepicker you will start with the view to select the years  20 years ago relative to the current year

User · Answer

Try the following -  ChangeYear - When set to true  indicates that the cells of the previous or next month indicated in the calendar of the current month can be selected  This option is used with options showOtherMonths set to true  YearRange - Specifies the range of years in the year dropdown   Default value     -10  10    Example -   document  ready function            quot  date quot   datepicker           changeYear true          yearRange   quot 2005 2015 quot               See - set year range in jquery datepicker

[jquery] jQuery UI: Datepicker set year range dropdown to 100 years

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-datepicker