jQuery datepicker maxDate issue

Question

I have the following code for jQuery datepicker

        $('#startDate').datepicker({
            format: "dd/mm/yyyy",
            maxDate: '0'
        })
        .on('changeDate', function (ev) {
            $('#startDate').datepicker('hide');
        });

It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.

Updated with full html markup.

<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">

Using jQuery 1.10.2 and Angular 1.4.1

What you have is correct, and should give the desired behaviour. Do you have a link to where it is not working? — MasNotsram
– MasNotsram, Commented Oct 18, 2016 at 8:19
Site note, this will not prevent users from typing future dates into the field, but will simply prevent them picking those future dates from the datepicker itself. — MasNotsram
– MasNotsram, Commented Oct 18, 2016 at 8:20
works fine for me, but as MasNotsram says, it only stops them picking future dates in the UI, not typing them in the box. Also, your date format is setting is incorrect, it should be dateFormat: "dd/mm/yy" - see api.jqueryui.com/datepicker/#option-dateFormat — ADyson
– ADyson, Commented Oct 18, 2016 at 8:22
lastly, you don't need the ".on" method - the picker will hide itself automatically when someone selects a date. That code is redundant. — ADyson
– ADyson, Commented Oct 18, 2016 at 8:24

Gaurav joshi · Accepted Answer · 2016-10-18 08:58:52Z

1

Hope this will work for you

$( "#datepicker" ).datepicker({
    format: "dd/mm/yyyy",
    maxDate: 0
});

edited Oct 18, 2016 at 8:58

answered Oct 18, 2016 at 8:29

Gaurav joshi

1,7971 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ADyson Over a year ago

neither "format" nor "endDate" are properties of the jQuery datepicker. (see api.jqueryui.com/datepicker) This answer will not help.

Gaurav joshi Over a year ago

Ah sorry, I thought you are using Jquery bootstrap datepicker this will surely work for you :- $( "#datepicker" ).datepicker({ format: "dd/mm/yyyy", maxDate: 0 }); here you can check testing

Ctrl_Alt_Defeat Over a year ago

@gauravjoshi - you were correct in you original answer and if you had have puta note in saying was I using bootstrap datepicker along with you code it might have been more clear as to the properties you were using - it is unfortunate you were automatically down voted

ADyson Over a year ago

@Ctrl_Alt_Defeat to be fair the original question clearly states that jQuery datepicker was being used. Therefore my comment is based on that assumption. There was no reliable way to tell from the question that it might not be. It's only later that you realised this wasn't the case by looking elsewhere in your code.

Rajeesh Menoth · Accepted Answer · 2016-10-18 09:00:32Z

0

Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.

HTML

<input id="Datepicker" type="text" readonly='true' />

Demo : Click here

edited Oct 18, 2016 at 9:00

answered Oct 18, 2016 at 8:43

Rajeesh Menoth

1,7953 gold badges18 silver badges37 bronze badges

3 Comments

ADyson Over a year ago

This is anti-user. in particular it's bad for people who use their keyboard over their mouse, or people with accessibility issues. For instance I know lots of typists who tab through forms and type the values into them, rather than using the mouse to select every field. Such people would find this incredibly annoying. Also, your demo hasn't corrected the mistake with the non-existent format property, or the incorrect format string

Rajeesh Menoth Over a year ago

@ADyson Good Thought I Agree With U! But his need Prevent the user from typing a date into the text box, So based on his question i posted this answer.

ADyson Over a year ago

In the original question the OP never asked for preventing the user from typing in the box. The confusion was around why the datepicker wasn't working (which turned out to be because they were using a different plugin to the one they thought they were). OP then suggested preventing typing in the box in the comments as a workaround, but I made the same comment there, that this is bad for usability - instead validation rules should be used to ensure that acceptable values are entered.

Ctrl_Alt_Defeat · Accepted Answer · 2016-10-18 09:06:35Z

0

Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

answered Oct 18, 2016 at 9:06

Ctrl_Alt_Defeat

4,01113 gold badges71 silver badges126 bronze badges

Collectives™ on Stack Overflow

jQuery datepicker maxDate issue

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related