更改 jQueryUI Datepicker 时更新 DIV？

Question

我正在试验 jQueryUI 日期选择器。

我的最终目标是将它与项目任务管理应用程序一起使用，该应用程序在每个任务记录的弹出模式 window 中显示任务数据。然后它将显示一个 截止日期 字段作为这样的文本... Due Date: <div id="due-date">05/23/2015</div>

然后我希望能够单击截止日期 #due-date DIV 并让它显示一个内联日期选择器日历。

用户可以选择一个日期值，然后它将更新 Due Date: <div id="due-date">05/23/2015</div> 以显示新选择的日期值。（以及进行 AJAX 更新 post）。

下面的演示是此过程的开始，因为它有一个文本输入字段，我在单击日历日期选择器值时更新了该字段。同时更改文本值会更新选定的日历值（2 向）。

The problem is that it does not let me update or 运行 other code when the value is selected and changed...

演示：http://jsfiddle.net/jasondavis/KRFCH/268/

HTML...

<input type="text" id="d" />

<div id="due-date">05/23/2015</div>

<div id="due-date-cal"></div>

JavaScript...

$('#due-date-cal').datepicker({
    inline: true,
    altField: '#d'
});

$('#d').change(function(){

    // does not work!
    alert($(this).val());
    $('#due-date').html($(this).val());

    // works
    $('#due-date-cal').datepicker('setDate', $(this).val());

});

Answer 1

使用onSelect函数

JSFiddle

$('#due-date-cal').datepicker({
  inline: true,
  altField: '#d',
  onSelect: function(dateText, inst) {
    $('#due-date').html($(this).val());
  }
});

Answer 2

您的事件在 #d 被更改时触发，而不是日期选择器。

$(document).on('change', '#due-date-cal', function(){
    //Code Here
});

//Instead of:

$('#d').change(function(){
    //code here
});

更改 jQueryUI Datepicker 时更新 DIV？

Update a DIV when jQueryUI Datepicker is changed?

jquery

jquery-ui

jquery-ui-datepicker