javascript - 表单自动填充时间和日期

Question

我正在尝试自动填充 HTML 表单的时间和日期，并且需要使用 UTC 时间。我想使用 PHP 或 javascript。

<form>
<label>Date</label>
<input type="date" name="date" value="<?php echo date('Y-m-d'); ?>">
<br />
<label>Time</label>
<input type="time" name="time"/ value="">
</form>

提前致谢。

Answer 1

在 JavaScript 中，Date对象用于检索时间和日期。要分别使用时间和日期预先填充两个输入字段，您首先需要获取对它们的引用，以便能够使用 JavaScript 对其进行操作。

两个输入字段都设置了名称标签，因此我们可以使用它。

var inputElementTime=document.getElementsByName("time")[0];
var inputElementDate=document.getElementsByName("date")[0];

函数 getElmentsByName 返回一个数组，因为可以有多个具有相同名称的元素。在您的情况下，只有一个，因此我们可以通过附加来直接使用数组的第一个元素[0]。

现在我们需要获取实际日期：

var now=new Date();

输入元素.value属性需要以特殊方式格式化。时间应该是hh:mm和日期：yyyy-mm-dd

注意： hh、mm 和 dd 总是需要有 2 位数字。如果是 6 月 1 日，则必须添加前导零，例如01。

这是完整的示例（只需单击“运行代码片段”）：

var now = new Date();
var inputElementTime = document.getElementsByName("time")[0];
var inputElementDate = document.getElementsByName("date")[0];
inputElementTime.value = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);
inputElementDate.value = now.getUTCFullYear() + "-" + ("0" + now.getMonth()).slice(-2) + "-" + ("0" + now.getDate()).slice(-2);

<form>
  <label>Date</label>
  <input type="date" name="date">
  <br />
  <label>Time</label>
  <input type="time" name="time">
</form>

Answer 2

您只需要添加<?= date('H:i'); ?>您的时间输入。

<input type="time" name="time"/ value="<?= date('H:i'); ?>">

解释：

<?=date('H:i');?> 是一样的： <?php echo date('H:i');?>

'H' 是 24 小时格式的小时，'i' 是带前导零的分钟。

您可以查看https://www.php.net/manual/en/function.date.php以了解格式化日期的不同可能性。