Question

我有一个php页面，它从Mysql表中读取数据并将其显示在HTML表格中。然后我使用AJAX允许用户一次更新一行数据。对于文本字段，这可以正常工作。

但是，其中一列是日期。我真的希望用户从JQuery的datepicker中选择日期，但我无法弄清楚如何做到这一点。

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

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

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

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

我的部分问题是，datepicker使用了HTML元素的id，但我已经在使用它...

知道如何添加datepicker吗？

由于

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"
});

Answer 2

我没有看到id的问题，但我认为使用类会更好。然后，您可以将所有日期转换为输入元素，并一次性使用datepickers进行检测。

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中加入datepicker

2 个答案: