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

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

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

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

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

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

[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