Change option dynamically in JQuery UI DatePicker fails

Question

I want to make date range selection using jquery-ui datepicker. First change at #dteStart succeed to set minDate at #dteEnd. But #dteEnd failed to refresh its options on next change, if i alert DateOptions.minDate its value changed according to dateMin.

Maybe i miss something here...

$(document).ready(function () 
{
    $("#dteStart").datepicker()
    .change(function () 
    {
        dateStart = $(this).datepicker('getDate');
        dateMin = new Date(dateStart.getTime());
        dateMin.setDate(dateMin.getDate() + 1);

        var DateOptions = {
            dateformat: "mm/dd/yyyy",
            minDate: dateMin
        }
        $("#dteEnd").datepicker(DateOptions);
    });
});

TIA,

REV

amantur · Accepted Answer · 2010-12-07 04:06:16Z

32

put $("#dteEnd").datepicker("destroy"); before $("#dteEnd").datepicker(DateOptions); and it will work fine.

answered Dec 7, 2010 at 4:06

amantur

40.6k22 gold badges136 silver badges192 bronze badges

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

2 Comments

Siddhant Over a year ago

I wish i could give +2 to this answer!

raza9798 Over a year ago

those who use datetimepicker package try this which is working $("#endDate").datetimepicker("destroy");

Torge · Accepted Answer · 2016-01-06 15:30:19Z

26

If you just want to change the already configured options, you can also do:

$("#dteEnd").datepicker("option", DateOptions);

or

$("#dteEnd").datepicker("option", { dateFormat: "mm/dd/yyyy" });

edited Jan 6, 2016 at 15:30

answered Aug 3, 2013 at 10:38

Torge

2,2841 gold badge27 silver badges34 bronze badges

3 Comments

Pons Over a year ago

For example: $( ".publishdatepicker" ).datepicker("option",{ yearRange: "-90:+1"});

Leroy Meijer Over a year ago

Your second line, doesn't work with me, only when dateformat is dateFormat (with a capitalized F) jQueryUI 1.10.2

Torge Over a year ago

This second line was actually not from me, someone else put it in there. But I corrected it. Thx.

bencergazda · Accepted Answer · 2015-11-05 15:08:37Z

5

The following jQuery helper function may be useful in such cases to preserve the original options:

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

It saves the previous options and extends them with the new options.

answered Nov 5, 2015 at 15:08

bencergazda

7009 silver badges21 bronze badges

Comments

Malik · Accepted Answer · 2021-05-20 11:01:20Z

0

$('#divbspDate').data("DateTimePicker").destroy();

You can try this, for Date time picker it is working.

answered May 20, 2021 at 11:01

Malik

33 bronze badges

1 Comment

andriy-baran Over a year ago

Please apply code formating for the snippet

Collectives™ on Stack Overflow

Change option dynamically in JQuery UI DatePicker fails

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related