jQuery UI datepicker - input invalid on load if using $('').datepicker('option', {})

Question

I have the following simple form:

<form>
    <input name="default" type="date" required="required" /><br />
    <input name="maxDate" type="date" required="required" />
</form>

If I init the jQuery UI Datepicker plugin like this:

$('input[type=date]').datepicker({
    dateFormat: "yy-mm-dd"
});
$('input[name="maxDate"]').datepicker('option', {
    maxDate: 0
});

The second input with the extended options will be invalid on page load (see the attached JSfiddle), until I open the datepicker in it and set some values.

I checked the Datepicker Widget API, but it looks to be the valid way to give extra option to the selected datepicker instance. Am I doing something wrong?

Thank you in advance :)

EDIT: Screenshot attached (FF 41)

You should change input type from date to text or use Modernizr or similar library to feature detect if the browser supports the input type=date, and then load the jQuery UI datepicker if if does not. Maybe you get confused that in some browsers html5 datepicker is upon the other one and you can't see it. — calinaadi
– calinaadi, Commented Nov 5, 2015 at 13:10
@DeepakBiswal Check it in Firefox; isn't the second input red at your browser? (See screenshot) — bencergazda
– bencergazda, Commented Nov 5, 2015 at 13:17

Community · Accepted Answer · 2017-05-23 12:03:50Z

0

You can call destroy and then reinitialize desired datepicker:

$('input[name="maxDate"]').datepicker("destroy"); $('input[name="maxDate"]').datepicker({maxDate: 0,dateFormat: "yy-mm-dd"});

like here: Change option dynamically in JQuery UI DatePicker fails

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Nov 5, 2015 at 14:54

calinaadi

1,4661 gold badge13 silver badges22 bronze badges

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

1 Comment

bencergazda Over a year ago

Thanks. Finally, i wrote the following function, based on your answer:

$.fn.customizeDatepicker = function(newOptions) {     var globalOptions = $(this).datepicker('option', 'all');     $(this).datepicker('destroy').datepicker($.extend(globalOptions, newOptions));     return this; };

Collectives™ on Stack Overflow

jQuery UI datepicker - input invalid on load if using $('').datepicker('option', {})

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related