Question

我正在尝试使用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更新帖子）。

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

问题是，当选择并更改值时，它不允许我更新或运行其他代码......

演示：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());
  }
});

更改jQueryUI Datepicker时更新DIV？

1 个答案: