更改jQueryUI Datepicker时更新DIV？-Java 学习之路

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

我的最终目标是将其与项目任务管理应用程序一起使用，该应用程序在每个任务记录的弹出窗口模式窗口中显示任务数据 . 然后它将显示一个 Due Date 字段作为这样的文本... 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());

});

2 回答

使用onSelect功能

JSFiddle

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

回复于 2024-05-03T11:52:14+08:00

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

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

//Instead of:

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

回复于 2024-05-03T11:52:14+08:00

更改jQueryUI Datepicker时更新DIV？

2 回答

相关问题