HTML | DOM 输入日期时间对象

在开发网页应用程序时，我们经常需要根据用户输入的日期和时间来进行相应的处理。在 HTML 和 DOM 中，我们可以使用日期时间对象来获取，存储和操作日期和时间信息。

获取日期时间对象

要获取日期时间对象，我们可以使用 new Date() 构造函数。如果没有任何参数，该函数将创建一个表示当前日期和时间的对象。我们也可以使用不同的参数来指定日期和时间。

以下是一些获取日期时间对象的示例代码：

// 获取当前日期时间
var currentDateTime = new Date();

// 获取指定日期时间
var someDateTime = new Date("2022-01-01T12:00:00");

// 获取指定年月日的日期时间
var someDate = new Date(2022, 0, 1);

// 获取指定年月日时分秒的日期时间
var someTime = new Date(2022, 0, 1, 12, 0, 0);

访问日期时间对象的属性

有许多不同的属性可以用于访问日期时间对象的日期和时间信息。以下是一些常用的属性：

• getFullYear()：返回年份（四位数）
• getMonth()：返回月份（0-11）
• getDate()：返回日期（1-31）
• getDay()：返回星期几（0-6，0 表示星期日）
• getHours()：返回小时数（0-23）
• getMinutes()：返回分钟数（0-59）
• getSeconds()：返回秒数（0-59）
• getMilliseconds()：返回毫秒数（0-999）

以下是一些访问日期时间对象属性的示例代码：

var someDateTime = new Date("2022-01-01T12:00:00");

console.log(someDateTime.getFullYear()); // 输出 2022
console.log(someDateTime.getMonth()); // 输出 0
console.log(someDateTime.getDate()); // 输出 1
console.log(someDateTime.getDay()); // 输出 6
console.log(someDateTime.getHours()); // 输出 12
console.log(someDateTime.getMinutes()); // 输出 0
console.log(someDateTime.getSeconds()); // 输出 0
console.log(someDateTime.getMilliseconds()); // 输出 0

设置日期时间对象的属性

我们也可以使用一些方法来设置日期时间对象的属性。以下是一些常用的方法：

• setFullYear(year[, month[, date]])：设置年份（四位数）
• setMonth(month[, date])：设置月份（0-11）
• setDate(date)：设置日期（1-31）
• setHours(hour[, min[, sec[, ms]]])：设置小时数（0-23）
• setMinutes(min[, sec[, ms]])：设置分钟数（0-59）
• setSeconds(sec[, ms])：设置秒数（0-59）
• setMilliseconds(ms)：设置毫秒数（0-999）

以下是一些设置日期时间对象属性的示例代码：

var someDateTime = new Date("2022-01-01T12:00:00");

someDateTime.setFullYear(2023);
console.log(someDateTime.getFullYear()); // 输出 2023

someDateTime.setMonth(5); // 月份从 0 开始计数
console.log(someDateTime.getMonth()); // 输出 5

someDateTime.setDate(15);
console.log(someDateTime.getDate()); // 输出 15

someDateTime.setHours(18);
console.log(someDateTime.getHours()); // 输出 18

someDateTime.setMinutes(30);
console.log(someDateTime.getMinutes()); // 输出 30

someDateTime.setSeconds(45);
console.log(someDateTime.getSeconds()); // 输出 45

someDateTime.setMilliseconds(500);
console.log(someDateTime.getMilliseconds()); // 输出 500

输入日期时间对象

在 HTML 表单中，我们可以使用 <input> 元素的 type 属性设置输入框的类型。其中，datetime-local 类型允许用户输入日期和时间。

以下是一个输入日期时间对象的示例代码：

<form>
  <label for="datetime">选择日期和时间：</label>
  <input type="datetime-local" id="datetime" name="datetime">
  <button type="submit">提交</button>
</form>

当用户提交表单时，我们可以使用 JavaScript 获取输入框的值，然后将其转换为日期时间对象。以下是一个示例代码：

var datetimeInput = document.getElementById("datetime");
var datetimeValue = datetimeInput.value;

if (datetimeValue) {
  var datetimeObj = new Date(datetimeValue);
  console.log(datetimeObj);
}

在上面的代码中，我们先使用 document.getElementById() 方法获取输入框的元素，然后使用 value 属性获取输入框的值。如果输入框的值不为空，我们使用 new Date() 构造函数将其转换为日期时间对象。最后，我们可以在控制台中输出该对象。