jQuery datepicker 无法正确更新值

在我目前正在工作的网站上，我有一个用于添加事件的表单。此事件需要用户使用 jQuery 日期选择器选择日期。一个日期只能有一个事件。所以我想检查用户在日期选择器中插入的日期。我尝试通过在用户选择日期后获取值来执行此操作。然而问题是，日期选择器不会立即更新他的值。

我做了一个 JSFiddle 来展示这个问题。当您选择日期时，范围会更新并显示日期选择器的值。但正如您所看到的，第一次它是空白的，第二次它显示以前选择的日期。因此日期选择器不会立即更新值。我怎样才能解决这个问题？

我在堆栈溢出上查看了其他类似的问题，但他们的解决方案对我不起作用。

JSFiddle： http://jsfiddle.net/kmsfpgdk/ 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);
});

最好使用内置方法onSelect:fn to use:

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

Fiddle http://jsfiddle.net/kmsfpgdk/2/

根据文档：

onSelect http://api.jqueryui.com/datepicker/#option-onSelect

选择日期选择器时调用。该函数接收所选日期作为文本和日期选择器实例作为参数。this指关联的输入字段。