Clever Geek Handbook

JQuery datepicker does not update value properly

On the website I am currently working on, I have a form to add an event. This event requires a date that the user picks with the jQuery datepicker. A date can only have one event. So I want to check the date the user is inserting into the datepicker. I tried to do this by getting the value after the user selected the date. However, the problem is that datepickers doesn't update its value right away.

I made a JSFiddle to show the problem. When you select the date to update the range and shows the datepicker value. But as you can see, the first time it is empty, and the second time it shows the previous selected date. Thus, datepickers do not update the value immediately. How can I fix this?

I have looked at other similar questions here on stackoverflow, but their solutions did not 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);
});
+3


source to share


2 answers


Better to use the built-in method onSelect:fn

to use:

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

Fiddle



According to the documentation:

onChoose

Called when a datepicker is selected. The function gets the selected date as text and a datepicker instance as parameters. this one refers to the corresponding input field.

+6


source


change

the event occurs before the event blur

.

Use .change()

instead.blur() 



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

Updated jsFiddle Demo

+1


source






More articles:


All Articles