更改 jQueryUI Datepicker 时更新 DIV？答案

【问题标题】：Update a DIV when jQueryUI Datepicker is changed?更改 jQueryUI Datepicker 时更新 DIV？
【发布时间】：2015-05-01 20:17:27
【问题描述】：

我正在尝试使用 jQueryUI 日期选择器。

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

然后我希望能够点击到期日期#due-date DIV 并让它显示一个内嵌的日期选择器日历。

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

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

The problem is that it does not let me update or run 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());

});

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

使用 onSelect 函数

JSFiddle

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

【讨论】：

完美我刚看到这个，好多了

【解决方案2】：

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

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

//Instead of:

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

【讨论】：