CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
SemperMemento
SemperMemento

Reputation: 414

jQuery datepicker does not update value properly

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);
});

Upvotes: 4

Views: 26356

Answers (3)

Serj Sagan
Serj Sagan

Reputation: 30267

If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.

Upvotes: -1

Jai
Jai

Reputation: 74738

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.

Upvotes: 7

Rahul Desai
Rahul Desai

Reputation: 15501

change event happens before blur event.

Use .change() instead of .blur()

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

Updated jsFiddle Demo

Upvotes: 1

Related Questions