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, Nov 05 '15 at 13:10
@DeepakBiswal Check it in Firefox; isn't the second input red at your browser? (See screenshot) — bencergazda, Nov 05 '15 at 13:17
The second input is red because of the requiered attribute not because it's something wrong with it. — calinaadi, Nov 05 '15 at 13:24
@calinaadi That's true, it IS required. Both are required. :-) But it is RED not because it's required, but because `$('input[name="maxDate"]').datepicker('option', { maxDate: 0 });` somehow makes it invalid. Try renaming the 2nd input so the `$('input[name="maxDate"]').datepicker('option', ...)` cannot be executed. — bencergazda, Nov 05 '15 at 13:27
You are initializing maxDate datePicker twice so second time you do it it's marked as changed so that's why the requiered validator is triggered. That it was i was tring to say. I've noticed that both are requiered in the first place. — calinaadi, Nov 05 '15 at 13:32
You can initialize them like this:$('input[name="default').datepicker({ dateFormat: "yy-mm-dd" }); $('input[name="maxDate"]').datepicker({ dateFormat: "yy-mm-dd", maxDate: '0' }); — calinaadi, Nov 05 '15 at 13:35
[This](http://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input) is what you need. Please check! — Deepak Biswal, Nov 05 '15 at 13:41
@calinaadi Thank you. What I'd like to do is initalize Datepicker on _all_ `input[type=date]`, and set _custom options_ on some instances (like `input[name="maxDate"]`). Do you have maybe some idea if it's possible? Probably I've misunderstood how `.datepicker('option', {...})` works. — bencergazda, Nov 05 '15 at 13:44
@DeepakBiswal Yes, it might be a way to solve the problem, thx :-) — bencergazda, Nov 05 '15 at 13:45
If that's what you need as answer let me know I'll post it as an answer! — Deepak Biswal, Nov 05 '15 at 13:47
@DeepakBiswal Thank you, won't forget. But still would like to wait if a real solution arrives, 'cause removing the red borders rather just hides the problem than solves... :-) — bencergazda, Nov 05 '15 at 13:56
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: http://stackoverflow.com/questions/4373072/change-option-dynamically-in-jquery-ui-datepicker-fails — calinaadi, Nov 05 '15 at 14:05

score 0 · Accepted Answer · edited May 23 '17 at 12:03

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 '17 at 12:03

Community

1
1

answered Nov 05 '15 at 14:54

calinaadi

1,466
1
13
22

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; };` – bencergazda Nov 05 '15 at 14:59

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

1 Answers1