jQuery datepicker mindate, maxdate

Question

I have the two following datepicker objects but I can't get what I want as I am getting stuck with the minDate and maxDate options:

This is to restrict the dates to future dates.

What I want: restrict the dates from current date to 30 years time.

What I get: restrict the dates from current date to 10 years time.

$(".datepickerFuture").datepicker({
    showOn: "button",
    buttonImage: 'calendar.gif',
    buttonText: 'Click to select a date',
    duration:"fast",
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    constrainInput: true,
    minDate: 0,
    maxDate: '+30Y',    
        buttonImageOnly: true
    });

This is to restrict to select only past dates:

What I want: restrict the dates from current date to 120 years ago time.

What I get: restrict the dates from current date to 120 years ago time, but when I select a year the maximum year will reset to selected year (e.g. what I would get when page load from fresh is 1890-2010, but if I select 2000 the year select box reset to 1880-2000) .

$(".datepickerPast").datepicker({
    showOn: "button",
   buttonImage: 'calendar.gif',
    buttonText: 'Click to select a date',
    duration:"fast",
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    constrainInput: true,
    yearRange: '-120:0',
    maxDate: 0,
    buttonImageOnly: true
});

I need help with both datepicker object, any help would be very much appreciated.

score 22 · Answer 1 · answered Jul 14 '10 at 11:40

22

$("#datepick").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: 'images/calendar.gif',
            buttonImageOnly: true,
            dateFormat: 'dd/mm/yy',
            minDate: '-100Y',
    maxDate: '-1Y', 
    yearRange: '-100',

        });

answered Jul 14 '10 at 11:40

Egglabs

3,126
10
33
48

+1 for yearRange with min/max Date. I didn't know I can setDate like that. Thanks a lot! – Adrian P. Feb 07 '14 at 15:28

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

I fixed my problem which it was the jquery libraries were a bit out date.

If anyone interested on this solution please check here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 19 '10 at 08:28

Amra

24,780
27
82
92

score 1 · Answer 3 · answered Sep 04 '13 at 14:59

1

To display from current date to 1 year = maxDate: '+1Y', To display from current date to 30 days = maxDate: '+30D',

answered Sep 04 '13 at 14:59

Dinesh

11
1

score 1 · Answer 4 · edited Jan 21 '13 at 06:34

1

The +30 years one should work fine as shown here:

For -120 years you just need to do the inverse here

edited Jan 21 '13 at 06:34

Akhil Jain

13,872
15
57
93

answered Apr 14 '10 at 16:00

Neil Aitken

7,856
3
41
40

For the +30, thats what i thought but I am just getting +10 years. For the -120 years, what do you mean? Thanks. – Amra Apr 14 '10 at 16:06
I just used '-120Y' for the minDate and 0 for the maxDate, if you look at the jsBin links you can see the code I used – Neil Aitken Apr 14 '10 at 16:21
1

@Cesar -- the dropdown for year will change based on the current year. It appears to show only -10/+10 from the current year, but respects the min/max values that you supply. Look at the code for _generateMonthYearHeader in the jQuery UI js file. – tvanfosson Apr 14 '10 at 16:24
@tvanfosson: I am looking at the code for _genereateMonthYearHeader in the Jquery UI js file, and I've changed the 10 for 100, but still doesn't show more than 10. Is there anyway to display more than 10 editing this file? Thanks in advance. – Amra Apr 15 '10 at 07:58
1

@Cesar - modifying the code **will** work, I'm sure, but I'm not sure that it's a good idea. Having 100 items in a dropdown is a pretty poor interface, IMO. If you are going to make the change be sure that you're not loading the minified (unchanged) version (or that you reminify your updated code). You might want to try using Firebug to make sure that your updated code is doing what it is supposed to. – tvanfosson Apr 15 '10 at 11:31
@Everyone: Could you take a look at this link ( http://jsbin.com/ivine3 ) to see what I mean on past dates example? When 2000 is selected on year ddl, then 1990, 2010 its gone, to be able to select 2010 back, 2000 has to be selected. Does anyone how to stop this from happening? Thanks. – Amra Apr 15 '10 at 15:20

jQuery datepicker mindate, maxdate

4 Answers4

Linked