设置日期时间选择器 JavaScript

在 Web 开发中，日期时间选择器是一个常见的功能。使用 JavaScript 可以很方便地设置日期时间选择器。本篇文章将介绍如何使用 JavaScript 设置日期时间选择器。

1. HTML Markup

首先，需要在 HTML 中添加日期时间选择器的相关元素。以下是一个简单的示例：

<label for="date">选择日期:</label>
<input type="date" id="date" name="date">

<label for="time">选择时间:</label>
<input type="time" id="time" name="time">

2. JavaScript

接下来，需要使用 JavaScript 来设置日期时间选择器。

2.1 获取日期时间选择器元素

首先，需要获取日期时间选择器的相关元素。可以使用 document.getElementById() 方法来获取这些元素。以下是获取日期时间选择器元素的示例代码：

const dateElement = document.getElementById('date');
const timeElement = document.getElementById('time');

2.2 监听日期时间选择器的变化

接下来，需要监听日期时间选择器的变化。可以使用 addEventListener() 方法来添加事件监听器。以下是添加日期时间选择器事件监听器的示例代码：

dateElement.addEventListener('input', () => {
  console.log(dateElement.value); // 打印日期值
});

timeElement.addEventListener('input', () => {
  console.log(timeElement.value); // 打印时间值
});

2.3 设置日期时间选择器的默认值

如果需要设置日期时间选择器的默认值，可以使用 value 属性来设置。以下是设置日期时间选择器默认值的示例代码：

dateElement.value = '2022-01-01';
timeElement.value = '12:00';

3. 完整代码

以下是完整的设置日期时间选择器的 JavaScript 代码：

const dateElement = document.getElementById('date');
const timeElement = document.getElementById('time');

dateElement.addEventListener('input', () => {
  console.log(dateElement.value); // 打印日期值
});

timeElement.addEventListener('input', () => {
  console.log(timeElement.value); // 打印时间值
});

dateElement.value = '2022-01-01';
timeElement.value = '12:00';

4. 总结

使用 JavaScript 设置日期时间选择器非常简单。只需要获取日期时间选择器元素、监听日期时间选择器变化、设置日期时间选择器默认值即可。