jQuery datepicker does not update value properly

Question

On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.

I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?

I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.

JSFiddle: http://jsfiddle.net/kmsfpgdk/

HTML:

<input type="text" id="datepicker" name="date" />
<span id="data"></span>

JS:

$('#datepicker').datepicker();

$('#datepicker').blur(function () {
    var val = $(this).val();
    $('#data').text(val);
});

Solution 1

Its better to use built in method onSelect:fn to use:

$('#datepicker').datepicker({
   onSelect: function () {
       $('#data').text(this.value);
   }
});

Fiddle

---

As per documentation:

onSelect

Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

Solution 2

change event happens before blur event.

Use .change() instead of .blur()

$('#datepicker').change(function() {
    var val = $(this).val();
    $('#data').text(val);
});

Updated jsFiddle Demo

Comments

[Chase Sandmann]

The problem with this version is that it doesn't work with manually typing in data. If the user tabs or clicks away without touching the datepicker, the update function does not trigger.