15

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

4 Answers 4

32

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

2
  • I wish i could give +2 to this answer!
    – Siddhant
    Commented Jul 18, 2013 at 14:02
  • 1
    those who use datetimepicker package try this which is working $("#endDate").datetimepicker("destroy"); Commented Oct 3, 2022 at 16:34
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" });
3
  • 3
    For example: $( ".publishdatepicker" ).datepicker("option",{ yearRange: "-90:+1"});
    – Pons
    Commented Jul 10, 2014 at 13:05
  • Your second line, doesn't work with me, only when dateformat is dateFormat (with a capitalized F) jQueryUI 1.10.2 Commented Jan 5, 2016 at 8:08
  • This second line was actually not from me, someone else put it in there. But I corrected it. Thx.
    – Torge
    Commented Jan 6, 2016 at 15:31
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.

0

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

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

1
  • Please apply code formating for the snippet Commented May 20, 2021 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.