jQuery datepicker years shown

Question

With the jQuery datepicker  how does one change the year range that is displayed   On the jQuery UI site it says the default is  10 years before and after the current year are shown    I want to use this for a birthday selection and 10 years before today is no good   Can this be done with the jQuery datepicker or will I have to use a different solution   link to datepicker demo  http   jqueryui com demos datepicker  dropdown-month-year

User · Answer

Perfect for date of birth fields  and what I use  is similar to what Shog9 said  although I m going to give a more specific DOB example       datePickerDOB   datepicker        yearRange   -122 -18     18 years or older up to 122yo  oldest person ever  can be sensibly set to something much smaller in most cases      maxDate   -18Y     Will only allow the selection of dates more than 18 years ago  useful if you need to restrict this     minDate   -122Y        Hope future googlers find this useful

User · Answer

Adding to what  Shog9 posted  you can also restrict dates individually in the beforeShowDay  callback function   You supply a function that takes a date and returns a boolean array        selector   datepicker   beforeShowDay  nationalDays    natDays     1  26   au     2  6   nz     3  17   ie     4  27   za      5  25   ar     6  6   se     7  4   us     8  17   id     9  7    br     10  1   cn     11  22   lb     12  12   ke      function nationalDays date         for  i   0  i  lt  natDays length  i             if  date getMonth      natDays i  0  - 1  amp  amp  date getDate       natDays i  1              return  false  natDays i  2      day                       return  true

User · Answer

i think this may work as well     function              DatepickerInputdob   datepicker           dateFormat   d M yy           changeMonth  true          changeYear  true          yearRange   1900  0           defaultDate   01 JAN 1900

User · Answer

DateOfBirth   datepicker           yearRange   -100  0           changeMonth  true          changeYear  true            yearRange   1950 2013      specifying a hard coded year range or this way  yearRange   -100  0      last hundred years  It will help to show drop down for year and month selection

User · Answer

If you look down the demo page a bit  you ll see a  Restricting Datepicker  section  Use the dropdown to specify the  Year dropdown shows last 20 years  demo   and hit view source       restricting   datepicker        yearRange   -20  0      this is the option you re looking for     showOn   both        buttonImage   templates images calendar gif        buttonImageOnly  true        You ll want to do the same  obviously changing -20 to -100 or something

User · Answer

If you look down the demo page a bit  you ll see a  Restricting Datepicker  section  Use the dropdown to specify the  Year dropdown shows last 20 years  demo   and hit view source       restricting   datepicker        yearRange   -20  0      this is the option you re looking for     showOn   both        buttonImage   templates images calendar gif        buttonImageOnly  true        You ll want to do the same  obviously changing -20 to -100 or something

User · Answer

Adding to what  Shog9 posted  you can also restrict dates individually in the beforeShowDay  callback function   You supply a function that takes a date and returns a boolean array        selector   datepicker   beforeShowDay  nationalDays    natDays     1  26   au     2  6   nz     3  17   ie     4  27   za      5  25   ar     6  6   se     7  4   us     8  17   id     9  7    br     10  1   cn     11  22   lb     12  12   ke      function nationalDays date         for  i   0  i  lt  natDays length  i             if  date getMonth      natDays i  0  - 1  amp  amp  date getDate       natDays i  1              return  false  natDays i  2      day                       return  true

User · Answer

Perfect for date of birth fields  and what I use  is similar to what Shog9 said  although I m going to give a more specific DOB example       datePickerDOB   datepicker        yearRange   -122 -18     18 years or older up to 122yo  oldest person ever  can be sensibly set to something much smaller in most cases      maxDate   -18Y     Will only allow the selection of dates more than 18 years ago  useful if you need to restrict this     minDate   -122Y        Hope future googlers find this useful

User · Answer

Adding to what  Shog9 posted  you can also restrict dates individually in the beforeShowDay  callback function   You supply a function that takes a date and returns a boolean array        selector   datepicker   beforeShowDay  nationalDays    natDays     1  26   au     2  6   nz     3  17   ie     4  27   za      5  25   ar     6  6   se     7  4   us     8  17   id     9  7    br     10  1   cn     11  22   lb     12  12   ke      function nationalDays date         for  i   0  i  lt  natDays length  i             if  date getMonth      natDays i  0  - 1  amp  amp  date getDate       natDays i  1              return  false  natDays i  2      day                       return  true

User · Answer

what no one else has put is that you can also set hard-coded date ranges   for example   yearRange   1901 2012    whilst it may be advisable to not do this  it is however  an option that is perfectly valid  and useful if you are legitimately looking for say a specific year in a catalogue - such as  1963 1984

User · Answer

au  nz  ie  etc  are the country codes for the countries whose national days are being displayed  Australia  New Zealand  Ireland        As seen in the code  these values are combined with   day  and passed back to be applied to that day as a CSS style  The corresponding styles are of the form show below  which moves the text for that day out of the way and replaces it with an image of the country s flag    au day     text-indent  -9999px    background   eee url au gif  no-repeat center      The  false  value that is passed back with the new style indicates that these days may not be selected

User · Answer

i think this may work as well     function              DatepickerInputdob   datepicker           dateFormat   d M yy           changeMonth  true          changeYear  true          yearRange   1900  0           defaultDate   01 JAN 1900

User · Answer

what no one else has put is that you can also set hard-coded date ranges   for example   yearRange   1901 2012    whilst it may be advisable to not do this  it is however  an option that is perfectly valid  and useful if you are legitimately looking for say a specific year in a catalogue - such as  1963 1984

User · Answer

DateOfBirth   datepicker           yearRange   -100  0           changeMonth  true          changeYear  true            yearRange   1950 2013      specifying a hard coded year range or this way  yearRange   -100  0      last hundred years  It will help to show drop down for year and month selection

User · Answer

If you look down the demo page a bit  you ll see a  Restricting Datepicker  section  Use the dropdown to specify the  Year dropdown shows last 20 years  demo   and hit view source       restricting   datepicker        yearRange   -20  0      this is the option you re looking for     showOn   both        buttonImage   templates images calendar gif        buttonImageOnly  true        You ll want to do the same  obviously changing -20 to -100 or something

User · Answer

If you look down the demo page a bit  you ll see a  Restricting Datepicker  section  Use the dropdown to specify the  Year dropdown shows last 20 years  demo   and hit view source       restricting   datepicker        yearRange   -20  0      this is the option you re looking for     showOn   both        buttonImage   templates images calendar gif        buttonImageOnly  true        You ll want to do the same  obviously changing -20 to -100 or something

User · Answer

Why not show the year or month selection boxes        datefield    datepicker       changeMonth  true      changeYear  true      yearRange  -90  0

User · Answer

Adding to what  Shog9 posted  you can also restrict dates individually in the beforeShowDay  callback function   You supply a function that takes a date and returns a boolean array        selector   datepicker   beforeShowDay  nationalDays    natDays     1  26   au     2  6   nz     3  17   ie     4  27   za      5  25   ar     6  6   se     7  4   us     8  17   id     9  7    br     10  1   cn     11  22   lb     12  12   ke      function nationalDays date         for  i   0  i  lt  natDays length  i             if  date getMonth      natDays i  0  - 1  amp  amp  date getDate       natDays i  1              return  false  natDays i  2      day                       return  true

User · Answer

au  nz  ie  etc  are the country codes for the countries whose national days are being displayed  Australia  New Zealand  Ireland        As seen in the code  these values are combined with   day  and passed back to be applied to that day as a CSS style  The corresponding styles are of the form show below  which moves the text for that day out of the way and replaces it with an image of the country s flag    au day     text-indent  -9999px    background   eee url au gif  no-repeat center      The  false  value that is passed back with the new style indicates that these days may not be selected

User · Answer

au  nz  ie  etc  are the country codes for the countries whose national days are being displayed  Australia  New Zealand  Ireland        As seen in the code  these values are combined with   day  and passed back to be applied to that day as a CSS style  The corresponding styles are of the form show below  which moves the text for that day out of the way and replaces it with an image of the country s flag    au day     text-indent  -9999px    background   eee url au gif  no-repeat center      The  false  value that is passed back with the new style indicates that these days may not be selected

User · Answer

au  nz  ie  etc  are the country codes for the countries whose national days are being displayed  Australia  New Zealand  Ireland        As seen in the code  these values are combined with   day  and passed back to be applied to that day as a CSS style  The corresponding styles are of the form show below  which moves the text for that day out of the way and replaces it with an image of the country s flag    au day     text-indent  -9999px    background   eee url au gif  no-repeat center      The  false  value that is passed back with the new style indicates that these days may not be selected

User · Answer

Why not show the year or month selection boxes        datefield    datepicker       changeMonth  true      changeYear  true      yearRange  -90  0

[jquery] jQuery datepicker years shown

Examples related to jquery

Examples related to datepicker