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

Jai · Accepted Answer · 2014-11-28 12:38:46Z

7

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.

answered Nov 28, 2014 at 12:38

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chase Sandmann Over a year ago

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.

Rahul Desai · Accepted Answer · 2014-11-28 12:36:36Z

1

change event happens before blur event.

Use .change() instead of .blur()

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

Updated jsFiddle Demo

answered Nov 28, 2014 at 12:36

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Comments

Serj Sagan · Accepted Answer · 2020-10-21 17:44:48Z

-1

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.

answered Oct 21, 2020 at 17:44

Serj Sagan

30.6k17 gold badges159 silver badges190 bronze badges

Collectives™ on Stack Overflow

jQuery datepicker does not update value properly

3 Answers 3

Fiddle

As per documentation:

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

As per documentation:

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related