如何在 innerHTML 中加入日期选择器

Question

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

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

初始数据table有下面一行显示当前日期字段：

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();

或者您可以将 class 添加到输入 (<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"
});

Answer 2

我没有发现 id 有问题，但我认为使用 class 会更好。然后，您可以将所有日期转换为输入元素，并一次性使用日期选择器对它们进行检测。

echo "<td><div class='date'>$row[eventdate]</div></td>";

然后您可以使用：

$('.date').html(function(i, date) {
    // The "date" parameter is the current text inside the div.

    // Create the input element.
    var $input = $('<input type="text"/>').val(date);

    // Instrument the input element with a datepicker.
    $input.datepicker();

    // Return the input element so it is placed in the div.
    return $input;
});

jsfiddle

如何在 innerHTML 中加入日期选择器

How to incorporate a datepicker in an innerHTML

javascript

jquery

datepicker