输入没有时间的日期时间 - HTML

在HTML中，我们可以使用<input>元素来让用户输入日期和时间。但是，假设我们只想让用户输入一个没有时间的日期，该怎么做呢？在这篇文章中，我们将介绍如何实现这一目标。

使用<input type="date">

HTML5中引入了一种新的<input>类型——date。它允许用户选择日期，而且不需要输入时间。我们来看一下示例代码：

<label for="birthday">请选择您的生日：</label>
<input type="date" id="birthday" name="birthday">

在这个例子中，我们创建了一个<label>，用于提示用户选择生日。紧接着，我们使用<input type="date">创建了一个用于输入日期的表单控件。

注意，<input type="date">的值格式是YYYY-MM-DD，其中“YYYY”表示年份，“MM”表示月份，“DD”表示日期。如果用户选择了一个无效的日期，例如2月30日，浏览器会自动调整日期，以使其合法。

使用JavaScript

如果你需要更加精确的日期选择，可以使用JavaScript编写自己的日期选择器。这样可以使你有更多的控制权，并且可以在用户选择日期时执行额外的验证逻辑。

在下面的代码片段中，我们演示了如何使用JavaScript来显示一个日期选择器，并在用户选择日期时更新一个<input>元素的值。

<label for="birthday">请选择您的生日：</label>
<input type="date" id="birthdayPicker">
<input type="hidden" id="birthday" name="birthday">

<script>
  const picker = document.getElementById('birthdayPicker');
  const input = document.getElementById('birthday');

  picker.addEventListener('input', () => {
    const date = new Date(picker.value);
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    input.value = `${year}-${month}-${day}`;
  });
</script>

在这个例子中，我们创建了一个带有id="birthdayPicker"的<input type="date">元素，它用于显示日期选择器。同时，我们创建了一个带有id="birthday"的隐藏<input>元素，它用于存储用户选择的日期值。

在JavaScript代码中，我们首先获取了<input type="date">和<input>元素的引用，并给<input type="date">添加了一个input事件。当用户选择日期时，该事件将被触发。

在事件处理函数中，我们使用new Date()将字符串日期值转换为日期对象，并使用日期对象的方法来提取年份、月份和日期。最后，我们将这些值组合成一个字符串，以YYYY-MM-DD的格式填充到隐藏的<input>元素中。

结论

在本篇文章中，我们介绍了如何在HTML中实现一个不带时间的日期输入框。我们使用了<input type="date">来创建日期选择器，并使用JavaScript来处理用户输入，并更新隐藏的<input>元素的值。希望这篇文章对你有所帮助！