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

score 32 · Accepted Answer · answered Dec 07 '10 at 04:06

32

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

answered Dec 07 '10 at 04:06

TheVillageIdiot

40,053
20
133
188

I wish i could give +2 to this answer! – Siddhant Jul 18 '13 at 14:02
1

those who use `datetimepicker` package try this which is working `$("#endDate").datetimepicker("destroy");` – Mohamed Raza Oct 03 '22 at 16:34

Torge · Answer 2 · 2016-01-06T15:30:19.060

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 06 '16 at 15:30

answered Aug 03 '13 at 10:38

Torge

2,174
1
23
33

3

For example: $( ".publishdatepicker" ).datepicker("option",{ yearRange: "-90:+1"}); – Pons Jul 10 '14 at 13:05
Your second line, doesn't work with me, only when dateformat is dateFormat (with a capitalized F) jQueryUI 1.10.2 – Leroy Meijer Jan 05 '16 at 08:08
This second line was actually not from me, someone else put it in there. But I corrected it. Thx. – Torge Jan 06 '16 at 15:31

score 5 · Answer 3 · answered Nov 05 '15 at 15:08

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.

score 0 · Answer 4 · answered May 20 '21 at 11:01

0

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

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

answered May 20 '21 at 11:01

Malik

3
3

Please apply code formating for the snippet – andriy-baran May 20 '21 at 14:41

Change option dynamically in JQuery UI DatePicker fails

4 Answers4

Linked