问题：
在表中编辑时，如何填充datetime-local的输入值？
景安翔
我试图实现的是，当我按下编辑按钮时，datetime-local的文本值将被复制到编辑行，这对其他字段有效，但对datetime-local无效。
<table class="w3-table-all w3-small w3-hoverable" id="table" style="width: 100%;">
<thead>
<tr class="w3" style="background-color: rgb(205, 226, 210); color: white;">
<th>ID</th>
<th>Event Name</th>
<th>Event Start Date</th>
<th>Event End Date</th>
<th>Location</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="template_row_data" class="w3-hover-grey">
<td class="numeric id"></td>
<td class="text event_name"></td>
<td class="text event_start_date"></td>
<td class="text event_end_date"></td>
<td class="text location"></td>
<td class="text status"></td>
<td class="icon" style="text-align: center; vertical-align: middle;">
<i class="fa fa-eye w3-large w3-text-grey view-btn" aria-hidden="true" title="Show QR"></i>
<i class="fa fa-edit w3-large w3-text-grey edit-btn" aria-hidden="true" title="Edit row"></i>
<i class="fa fa-circle-o-notch fa-spin w3-large w3-text-grey" aria-hidden="true"
title="Save to server"></i>
</td>
</tr>
</tbody>
<tr id="row_edit" class="w3-hover-khaki">
<td class="text id">
</td>
<td class="text event_name">
<input type="text" id="in_event_name" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_name"></i>
</td>
<td class="text event_start_date">
<input type="datetime-local" id="in_event_start_date" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_start_date"></i>
</td>
<td class="text event_end_date">
<input type="datetime-local" id="in_event_end_date" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_end_date"></i>
</td>
<td class="text location">
<input type="text" id="in_location" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_location"></i>
</td>
<td class="text status">
<select name="in_status" id="in_status" class="text" style="border:1px solid black; ">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_status"></i>
</td>
<td class="icon" style="text-align: center;">
<i class="fa fa-save w3-large w3-text-grey" aria-hidden="true" title="Save data"></i>
<i class="fa fa-times w3-large w3-text-red" aria-hidden="true" title="Cancel"></i>
</td>
</tr>
</table>
var id = "";
$(document).on('click', '.fa-edit', function () {
row2edit = $(this).parent().parent();
id = $(this).parent().parent().attr('id');
// Copy original data from row to edit into
// edit row input fields and columns
let newEditRow = $("#row_edit").clone();
newEditRow.children().eq(0).text(row2edit.children(".id").text());
let in_fields = [{ 'td_class': 'td.id' },
{ 'td_class': 'td.event_name', 'id_edit': '#in_event_name' },
{ 'td_class': 'td.event_start_date', 'id_edit': '#in_event_start_date' },
{ 'td_class': 'td.event_end_date', 'id_edit': '#in_event_end_date' },
{ 'td_class': 'td.location', 'id_edit': '#in_location' },
{ 'td_class': 'td.status', 'id_edit': '#in_status' },
];
$.each(in_fields, function (idx, item) {
let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
in_field_edit.val(row2edit.children(item.td_class).text());
if (idx == 2) {
let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
in_field_edit.val(row2edit.children(item.td_class).val());
}
});
newEditRow.show();
row2edit.before(newEditRow);
row2edit.hide();
$('.fa-edit').hide();
});
共有1个答案
梁丘赞
要定义datetime local输入字段，您仍然需要以标准格式提供datetime，请参见此处如何设置输入类型datetime local？的值？。
因此，类似于“2021-05-21T08:23”的内容将被接受。
var id = "";
$(document).on('click', '.fa-edit', function () {
row2edit = $(this).parent().parent();
id = $(this).parent().parent().attr('id');
// Copy original data from row to edit into
// edit row input fields and columns
let newEditRow = $("#row_edit").clone();
newEditRow.children().eq(0).text(row2edit.children(".id").text());
let in_fields = [{ 'td_class': 'td.id' },
{ 'td_class': 'td.event_name', 'id_edit': '#in_event_name' },
{ 'td_class': 'td.event_start_date', 'id_edit': '#in_event_start_date' },
{ 'td_class': 'td.event_end_date', 'id_edit': '#in_event_end_date' },
{ 'td_class': 'td.location', 'id_edit': '#in_location' },
{ 'td_class': 'td.status', 'id_edit': '#in_status' },
];
$.each(in_fields, function (idx, item) {
let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
in_field_edit.val(row2edit.children(item.td_class).text());
if (idx>1 && idx<4) {
let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
in_field_edit.val(row2edit.children(item.td_class).text().split(".").reverse().join("-")+"T00:00");
}
});
newEditRow.show();
row2edit.before(newEditRow);
row2edit.hide();
$('.fa-edit').hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="w3-table-all w3-small w3-hoverable" id="table" style="width: 100%;">
<thead>
<tr class="w3" style="background-color: rgb(205, 226, 210); color: white;">
<th>ID</th>
<th>Event Name</th>
<th>Event Start Date</th>
<th>Event End Date</th>
<th>Location</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="template_row_data" class="w3-hover-grey">
<td class="numeric id">123</td>
<td class="text event_name">myEvent</td>
<td class="text event_start_date">23.04.2021</td>
<td class="text event_end_date">24.04.2021</td>
<td class="text location">somewhere</td>
<td class="text status">Active</td>
<td class="icon" style="text-align: center; vertical-align: middle;">
<i class="fa fa-eye w3-large w3-text-grey view-btn" aria-hidden="true" title="Show QR"></i>
<i class="fa fa-edit w3-large w3-text-grey edit-btn" aria-hidden="true" title="Edit row">edit</i>
<i class="fa fa-circle-o-notch fa-spin w3-large w3-text-grey" aria-xhidden="true"
title="Save to server"></i>
</td>
</tr>
</tbody>
<tr id="row_edit" class="w3-hover-khaki">
<td class="text id">
</td>
<td class="text event_name">
<input type="text" id="in_event_name" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_name"></i>
</td>
<td class="text event_start_date">
<input type="datetime-local" id="in_event_start_date" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_start_date"></i>
</td>
<td class="text event_end_date">
<input type="datetime-local" id="in_event_end_date" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_end_date"></i>
</td>
<td class="text location">
<input type="text" id="in_location" class="text" style="border:1px solid black"><br>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_location"></i>
</td>
<td class="text status">
<select name="in_status" id="in_status" class="text" style="border:1px solid black; ">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
<i class="w3-text-red w3-tiny errmsg_in" id="errmsg_status"></i>
</td>
<td class="icon" style="text-align: center;">
<i class="fa fa-save w3-large w3-text-grey" aria-hidden="true" title="Save data"></i>
<i class="fa fa-times w3-large w3-text-red" aria-hidden="true" title="Cancel"></i>
</td>
</tr>
</table>
类似资料：
-
我创建了一个带有字段date_time的表，它的数据类型是datetime。 我正在使用PHP从这个表中获取记录，我想在超文本标记语言页面中显示这个日期和时间。 我正在设置它的value属性，但它不显示日期，是否需要执行任何转换以在HTML输入中显示此日期时间？
-
我需要创建PDF表格，可以用来从用户的输入。它们需要包含下拉框和文本框。请建议哪种软件或工具最适合我的目的
-
当通过Javascript设置该值并且该值包含秒数时，在Chrome上使用datetime本地输入类型似乎不起作用。为什么会这样？这似乎是一般的事情。简单来说，以下是如何重新创建问题： 创建一个元素，其中。 使用JavaScript（使用）将值设置为任意日期和时间，并带有非零秒（例如。）值。 尝试提交表单。它返回一个验证错误。 但是，如果您将秒数设置为0（例如，），或者该值是通过HTML属性设置的
-
问题内容： 我正在运行bash脚本，我想在执行脚本后用一些命令预填充命令行。唯一的条件是脚本当时不能运行。 我需要的是… 运行脚本 脚本停止后，在命令行中预填充了文本 可能吗 我所尝试的只是使用以下方法模拟bash脚本 但我正在寻找更简单的方法。 问题答案： 您需要使用TIOCSTI ioctl。这是一个示例C程序，显示了其工作方式： 编译并运行它，“日期”将作为标准输入的缓冲输入，程序退出后您的
-
输入[type=“datetime local”]行为在chrome 81和83之间发生了更改 论铬 在chrome 83上，这种行为已经改变：回车键触发日历的打开，并且没有键盘事件被触发（参见saucelabs上的行为）-chrome 83 以下代码（也在https://jsfiddle.net/os139hw6/) 显示keyup 13事件 我使用这个keyup 13事件来验证/提交数据，但这
-
我们有一个系统，创建预先填写的PDF合同，然后我们需要发送给客户签名，也允许客户更新可能包含错误信息的字段。 这里有一个解决办法或选择，但我希望有更好的方法 1）不要使用生成PDF的模板引擎，而是将这个负担移到Docusign中。然后我们可以使用Docusign中的文本选项卡来预填充字段并保持其可编辑性。