Question

My goal is to be able to display the same date in two selects as in the date-picker from jquery-ui.

I have created a http://jsfiddle.net/grappler/bzPYg/3/ based off this http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html

So this is my code. In the original code if I select a new date in the date-picker the date also changes in the select buttons. Now in the new set up the date doesn’t change and I don’t know how to have the Month and Year in one field.

Fiddle

Thank you for any help pointing me in the right direction.

Answer 1

The jQuery datepicker doesn’t have your old plugins’ custom events which you were binding, hence you should use the jQuery datepicker’s onSelect event to update your selects according to the selected date.

$('#departdate').datepicker({
    //...
    onSelect: function(dateText) {
        updateSelects(dateText);
    }
});

Fiddle

I did some other modifications to your function as well, most notably replacing your .attr calls on options by a proper .val in the select elements. Both work, but you should avoid using attributes for setting dynamic properties.

You may as well use .on instead .bind, which is the standard preferred way of binding event handlers since jQuery 1.7.

I also slightly modified how you were creating the Date objects.

For the month+year select, I kept the values as they are and applied some basic arithmetic for selecting, you could as well concatenate the month with year in the values (e.g. 1-2012 for Jan-2012 and replace the maths with string concatenation).