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

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

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

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    lt select class  ui-datepicker-year  onchange  DP jQuery   y   datepicker  selectMonthYear      a id     this   Y      onclick   DP jQuery   y   datepicker  clickMonthYear     a id        gt   b lt  g b     a yearshtml    lt option value    b      b  c   selected  selected         gt   b   lt  option gt    a yearshtml    lt  select gt      And replace it with this   a yearshtml    lt select class  ui-datepicker-year  onchange  DP jQuery   y     datepicker  selectMonthYear     a id     this   Y        onclick   DP jQuery   y   datepicker  clickMonthYear     a id          gt    for opg -1 b lt  g b          a yearshtml    b 10   0    opg  -1            opg  1    opg 0    lt  optgroup gt                    b lt  g-10     opg 1    lt optgroup label    b    gt   gt                           lt option value    b      b  c   selected  selected         gt   b   lt  option gt      a yearshtml    lt  select gt      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

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

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 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

[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