javascript - 如何将日期选择器合并到innerHTML中

Question

我有一个 php 页面，它从 Mysql 表中读取数据并将其显示在 HTML 表中。然后，我使用 AJAX 允许用户更新数据，一次一行。对于文本字段，效果很好。

但是，其中一列是日期。我真的希望用户从 JQuery 的日期选择器之类的东西中选择日期，但我不知道该怎么做。

初始数据表有以下行显示当前日期字段:

echo "<td><div id=$eventdate_id>$row[eventdate]</div></td>";

然后我使用 Javascript 修改此行以创建用户可以编辑的字段:

document.getElementById(eventdate_id).innerHTML = "<input type=text id='" +data_eventdate + "' value='"+ eventdate + "'>";

我的部分问题是日期选择器使用 HTML 元素的 id，但我已经在使用它了......

知道如何添加日期选择器吗？

谢谢

Answer 1

假设您正在使用https://jqueryui.com/datepicker/ ，设置innerHTML后，您可以这样做:

$( "#"+data_eventdate ).datepicker();

或者您可以向输入添加一个类 ( <input class="date_input" type=... )，然后一次性向所有输入添加日期选择器:

$( ".date_input" ).datepicker();

您可以在个人 datepicker( {/*options here*/} ) 中包含选项调用，或者您可以在代码开头使用 $.datepicker.setDefaults() 设置所有日期选择器的默认值(示例来自datepicker documentation):

$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});