Set min/max Date of jquery Datepicker

Question

I am having trouble understanding how to set the min/max Date of the jquery Datepicker. When I check the docs, i see that the dateformat is expected in new Date(2009, 1 - 1, 26). What does the 1-1 mean? When I chec w3c schools for js dateformats, I cannot find this one.

So I tried

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yyyy-mm',
    minDate: new Date(2001-01),
    maxDate: '+15Y'
});

But that leaves me with completely random results... It starts 2006 and ends 2026.

Here is fiddle http://jsfiddle.net/ANF2y/58/

In JavaScript [`Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) object `month` is calculated as 0 to 11. To set the month use `current month - 1`. — Pugazh, Sep 23 '16 at 11:59
@Pugazh ok. But why is the start**date** implemented as `1-1`?! — four-eyes, Sep 23 '16 at 12:00
@Stophface its month and not date. `new Date(year, month, date)` — Rajesh, Sep 23 '16 at 12:01
`1 - 1` equates to `0`. So that is a valid month `0 - January` — Pugazh, Sep 23 '16 at 12:02
@Pugazh so for starting on the first of januaray 2001 I would enter `new Date(2001, 00, 01)` I suppose, with `dateFormat: 'yyyy, mm, dd'`? That leaves me with the same results. It starts 2006 and ends 2026. — four-eyes, Sep 23 '16 at 12:05
Yes, `minDate: new Date(2001, 00, 01)` and date format can be of your choice Eg: `dateFormat: 'yyyy-mm'` — Pugazh, Sep 23 '16 at 12:12
`maxDate: '+15Y'` means `today + 15 years`. In case today is 23-Sep-2016 maxDate will be `23-Sep-2031`. — Pugazh, Sep 23 '16 at 12:14
new Date should be of the format (year, month(0 - 11), date). Check this link for acceptable formats - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date#Examples — Pugazh, Sep 23 '16 at 12:22
Check the updated fiddle - http://jsfiddle.net/ANF2y/62/. However there is an bug with jQuery Datepicker. It's not showing the years previous to 2006 on dropdown. — Pugazh, Sep 23 '16 at 12:28

score 1 · Accepted Answer · edited Sep 23 '16 at 12:30

1

In JavaScript month is calculated from 0 to 11. So while creating a new Date use current month - 1.

1 - 1 equates to 0. So that is a valid month (0 - January).

In your case set minDate as below.

$("#datepicker").datepicker({
  changeMonth: true,
  changeYear: true,
  minDate: new Date(2001, 0, 1),
  maxDate: '+15Y',
  dateFormat: 'yyyy-mm'
});

that is because the jquery date picker only shows 15 items at a time, there is no max date set so you can go as far in the future as you want. When it is set to 2001 you see 2006 in the dropdown as it is limited to 15 items. Select 2006 and then you'll see 2001 in the dropdown. Is your question can I show more items in the year dropdown list?

edited Sep 23 '16 at 12:30

Rajesh

24,354
5
48
79

answered Sep 23 '16 at 12:19

Pugazh

9,453
5
33
54

This one: http://jsfiddle.net/ANF2y/60/ starts at 2001 on your computer? Over here it starts 2006 and ends 2026... – four-eyes Sep 23 '16 at 12:25
It's a bug with jQuery [Datepicker](http://api.jqueryui.com/datepicker/). But you can select the previous months by using arrows :-( – Pugazh Sep 23 '16 at 12:30
I will report the bug to the developer/jQuery forum!! – Pugazh Sep 23 '16 at 12:31
1

oh man :( And i was freaking out over here... I thought is has something to do with the date format I am using. Thanks! I will try bootstrap-datepicker. – four-eyes Sep 23 '16 at 12:35
I dont think a bug report is necessary: http://stackoverflow.com/questions/13865218/jquery-ui-datepicker-set-year-range-dropdown-to-100-years – four-eyes Sep 23 '16 at 12:38
Awesome!. Thanks for sharing! – Pugazh Sep 23 '16 at 12:39

score 1 · Answer 2 · answered Sep 23 '16 at 12:38

I'm not going to go into minDate or maxDate as that has been well covered. But in addition to that, what you are looking for is yearRange will set the number of visible items in the year dropdown of the jquery date picker.

The documentation states:

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.

Reference

Set min/max Date of jquery Datepicker

2 Answers2