CODEWITHSUNDEEP
jquery-uiselectdatepicker
Barbs
Barbs

Reputation: 1115

JQueryUI set datepicker default date using select element value

I have a datepicker that I want to set the defaultDate parameter for 6, 12, 24 or 60 months from today using a select element.

I have running into trouble where I change the selected option using the select element where the value of the select element does not update in the DOM, so the datepicker using the selected value that was loaded with the page.

I have made a fiddle of it here http://jsfiddle.net/GLsTM/1/ so you can see what I'm referring to. 

<form>
<select name="Interval" id="Interval">
    <option value="6">6 Months</option>
    <option value="12">12 Months</option>
    <option value="24">2 Years</option>
    <option value="60">5 Years</option>
</select>
<input type="text" class="date" placeholder="dd/mm/yyyy"></input>


$(".date").datepicker({
        dateFormat: 'dd/mm/yyyy',
        showOn: 'button',
        firstDay: 1,
        defaultDate: "+"+$("#Interval").val()+"m"
    });

The default date of the datepicker is '+6m' but if you change the select to 12 months, the datepicker still uses 6 months. I want it to update the datepicker with defaultDate: '+12m'

Can anyone see what would make this work?

Thanks Greg

Upvotes: 1

Views: 1191

Answers (1)

pickypg
pickypg

Reputation: 22342

Changing the value of the select will only affect the date picker if you tell the date picker to change. Otherwise, it will never learn of the change because you set it once using the starting value.

$("#Interval").on("change", function() {
    $(".date").datepicker("option", "defaultDate", "+" + $(this).val() + "m");
});

Alternatively, you could pass an object incase you ever need to send more than one option value:

$("#Interval").on("change", function() {
    $(".date").datepicker("option", { defaultDate: "+" + $(this).val() + "m" });
});

Upvotes: 2

Related Questions