html 输入日期设置今天的默认值

📌 相关文章

📜 html 输入日期设置今天的默认值 - Html (1)

📅 最后修改于: 2023-12-03 15:15:42.395000 🧑 作者: Mango

在 HTML 表单中，我们经常需要使用日期选择器来让用户选择日期。在某些情况下，我们需要将日期选择器默认设置为当前日期。这篇文章将介绍如何在 HTML 中设置日期选择器的默认值为今天。

方法一：使用 JavaScript

我们可以使用 JavaScript 来获取当前日期，然后将其设置为日期选择器的默认值。具体步骤如下：

为日期选择器元素添加一个 id，例如 date-input。
```
<input type="date" id="date-input">
```
在 JavaScript 中获取当前日期，并转换为 yyyy-mm-dd 的格式。可以使用以下代码实现：
```
const today = new Date();
const yyyy = today.getFullYear();
const mm = ('0' + (today.getMonth() + 1)).slice(-2);
const dd = ('0' + today.getDate()).slice(-2);
const formattedToday = `${yyyy}-${mm}-${dd}`;
```
这里使用了 getFullYear、getMonth、getDate 等 Date 对象的方法，以及字符串模板和 slice 方法格式化日期。
将日期设置为日期选择器的默认值。可以使用以下代码实现：
```
const dateInput = document.getElementById('date-input');
dateInput.value = formattedToday;
```
这里使用了 getElementById 方法获取日期选择器元素，以及 value 属性设置其值。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 输入日期设置今天的默认值</title>
</head>
<body>
  <input type="date" id="date-input">
  <script>
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = ('0' + (today.getMonth() + 1)).slice(-2);
    const dd = ('0' + today.getDate()).slice(-2);
    const formattedToday = `${yyyy}-${mm}-${dd}`;
    const dateInput = document.getElementById('date-input');
    dateInput.value = formattedToday;
  </script>
</body>
</html>

方法二：使用 `value` 属性

如果只需要在 HTML 中设置日期选择器的默认值为今天，而不使用 JavaScript，可以直接在 HTML 中为日期选择器添加 value 属性，值为当前日期。具体步骤如下：

为日期选择器添加 value 属性，并将其值设置为 yyyy-mm-dd 格式的当前日期。可以使用以下代码实现：
```
<input type="date" value="yyyy-mm-dd">
```
注意，这里的日期格式要与日期选择器支持的格式相匹配。

在 HTML 中动态生成当前日期。可以使用以下代码实现：

<input type="date" value="" id="date-input">
<script>
const today = new Date();
const yyyy = today.getFullYear();
const mm = ('0' + (today.getMonth() + 1)).slice(-2);
const dd = ('0' + today.getDate()).slice(-2);
const formattedToday = `${yyyy}-${mm}-${dd}`;
const dateInput = document.getElementById('date-input');
dateInput.value = formattedToday;
</script>

这里在日期选择器元素后面添加了一个脚本标签，用于动态生成当前日期，并将其设置为日期选择器的默认值。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 输入日期设置今天的默认值</title>
</head>
<body>
  <!-- 方法一：使用 JavaScript -->
  <h2>方法一：使用 JavaScript</h2>
  <input type="date" id="date-input">
  <script>
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = ('0' + (today.getMonth() + 1)).slice(-2);
    const dd = ('0' + today.getDate()).slice(-2);
    const formattedToday = `${yyyy}-${mm}-${dd}`;
    const dateInput = document.getElementById('date-input');
    dateInput.value = formattedToday;
  </script>

  <!-- 方法二：使用 value 属性 -->
  <h2>方法二：使用 value 属性</h2>
  <input type="date" value="" id="date-input2">
  <script>
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = ('0' + (today.getMonth() + 1)).slice(-2);
    const dd = ('0' + today.getDate()).slice(-2);
    const formattedToday = `${yyyy}-${mm}-${dd}`;
    const dateInput2 = document.getElementById('date-input2');
    dateInput2.value = formattedToday;
  </script>
</body>
</html>

注意，以上两种方法在不同浏览器和设备上可能会有差异。在使用日期选择器时，尽量避免使用 JS 直接修改输入框的 value，而应该使用框架提供的一些插件，因为不同浏览器和手机系统对日期的内部格式不一样，直接修改 value 不一定能在所有设备上正常工作。