JavaScript 日期获取方法

介绍

在Web开发中，处理日期和时间是一项常见的任务。无论是显示当前时间、计算时间差，还是管理日程表和预约系统，掌握JavaScript中的日期处理能力都是必不可少的。JavaScript提供了内置的Date对象，它包含了丰富的方法来获取和操作日期与时间信息。

本文将全面讲解JavaScript中获取日期和时间的各种方法，从基础的Date对象创建，到各种获取日期组成部分的方法，再到日期格式化和实际应用场景。

Date对象基础

在JavaScript中，日期和时间通过Date对象来处理。Date对象是JavaScript的内置对象，提供了处理日期和时间的各种功能。

创建Date对象

创建Date对象有以下几种方式：

javascript
// 1. 创建表示当前日期和时间的Date对象
const currentDate = new Date();
console.log(currentDate);
// 输出示例: Wed May 11 2023 15:30:45 GMT+0800 (中国标准时间)

// 2. 从时间戳创建Date对象（毫秒数）
const timestampDate = new Date(1683792245000);
console.log(timestampDate);
// 输出示例: Thu May 11 2023 15:30:45 GMT+0800 (中国标准时间)

// 3. 从日期字符串创建Date对象
const stringDate = new Date('2023-05-11T15:30:45');
console.log(stringDate);
// 输出示例: Thu May 11 2023 15:30:45 GMT+0800 (中国标准时间)

// 4. 从年、月、日等值创建Date对象
// 注意：月份是从0开始计数的，0表示一月，11表示十二月
const componentDate = new Date(2023, 4, 11, 15, 30, 45);
console.log(componentDate);
// 输出示例: Thu May 11 2023 15:30:45 GMT+0800 (中国标准时间)

注意

在JavaScript中，月份是从0开始计数的！这意味着1月是0，12月是11。这常常是初学者容易犯错的地方。

获取日期组成部分的方法

Date对象提供了多种方法来获取日期和时间的不同部分。以下是这些方法的详细说明：

获取年份

javascript
const date = new Date();
const year = date.getFullYear();
console.log(year); // 输出当前年份，如：2023

获取月份

javascript
const date = new Date();
const month = date.getMonth();
console.log(month); // 输出0-11之间的数字，0代表1月，11代表12月

// 如果要显示月份名称
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月",
  "七月", "八月", "九月", "十月", "十一月", "十二月"];
console.log(monthNames[month]); // 输出当前月份名称

获取日期（一个月中的第几天）

javascript
const date = new Date();
const day = date.getDate();
console.log(day); // 输出1-31之间的数字

获取星期（一周中的第几天）

javascript
const date = new Date();
const weekday = date.getDay();
console.log(weekday); // 输出0-6之间的数字，0代表星期日，1代表星期一，以此类推

// 如果要显示星期名称
const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
console.log(weekdays[weekday]); // 输出当前星期名称

获取小时、分钟、秒和毫秒

javascript
const date = new Date();
const hours = date.getHours();       // 0-23之间的数字
const minutes = date.getMinutes();   // 0-59之间的数字
const seconds = date.getSeconds();   // 0-59之间的数字
const milliseconds = date.getMilliseconds(); // 0-999之间的数字

console.log(`${hours}:${minutes}:${seconds}.${milliseconds}`);
// 输出示例: 15:30:45.123

获取时间戳

javascript
const date = new Date();
const timestamp = date.getTime(); // 返回自1970年1月1日00:00:00 UTC以来的毫秒数
console.log(timestamp);
// 输出示例: 1683792245000

// 也可以使用静态方法获取当前时间戳
const currentTimestamp = Date.now();
console.log(currentTimestamp);
// 输出示例: 1683792245000

获取UTC时间（世界协调时间）

Date对象还提供了获取UTC时间的方法，这对于需要处理不同时区的应用非常有用：

javascript
const date = new Date();
const utcYear = date.getUTCFullYear();
const utcMonth = date.getUTCMonth();
const utcDate = date.getUTCDate();
const utcHours = date.getUTCHours();
const utcMinutes = date.getUTCMinutes();
const utcSeconds = date.getUTCSeconds();

console.log(`UTC时间：${utcYear}-${utcMonth + 1}-${utcDate} ${utcHours}:${utcMinutes}:${utcSeconds}`);

日期格式化

JavaScript的Date对象本身提供的格式化选项有限，但我们可以使用自定义函数来格式化日期：

javascript
function formatDate(date) {
  const year = date.getFullYear();
  // 月份和日期需要补零
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

function formatTime(date) {
  // 小时、分钟和秒数需要补零
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${hours}:${minutes}:${seconds}`;
}

function formatDateTime(date) {
  return `${formatDate(date)} ${formatTime(date)}`;
}

const now = new Date();
console.log(formatDate(now));      // 输出示例: 2023-05-11
console.log(formatTime(now));      // 输出示例: 15:30:45
console.log(formatDateTime(now));  // 输出示例: 2023-05-11 15:30:45

提示

String.padStart()是一个实用的方法，可以确保字符串达到指定长度，不足的话在开头添加指定字符。在处理日期和时间时，它可以帮助我们在个位数的月份、日期、小时等前添加零。

实际应用场景

场景1：显示当前日期和时间

网站中常常需要显示当前的日期和时间，特别是在博客文章、新闻或者事件记录中。

javascript
function displayCurrentDateTime() {
  const now = new Date();
  const formattedDateTime = formatDateTime(now);
  document.getElementById('current-time').textContent = formattedDateTime;
}

// 每秒更新一次
setInterval(displayCurrentDateTime, 1000);

场景2：计算两个日期之间的差值

例如，计算活动倒计时或计算项目持续时间：

javascript
function daysBetween(date1, date2) {
  // 将两个日期转换为毫秒时间戳
  const timestamp1 = date1.getTime();
  const timestamp2 = date2.getTime();
  
  // 计算差值（毫秒）
  const diffMilliseconds = Math.abs(timestamp2 - timestamp1);
  
  // 将毫秒转换为天数
  const daysDiff = Math.floor(diffMilliseconds / (1000 * 60 * 60 * 24));
  
  return daysDiff;
}

const startDate = new Date('2023-01-01');
const endDate = new Date('2023-05-11');
console.log(`两个日期相差 ${daysBetween(startDate, endDate)} 天`);
// 输出示例: 两个日期相差 130 天

场景3：日历应用 - 获取某月的所有日期

在日历应用中，我们经常需要获取某个月的所有日期，以构建月视图：

javascript
function getDaysInMonth(year, month) {
  // 创建给定年月的第一天
  const firstDay = new Date(year, month, 1);
  
  // 获取该月的第一天是星期几（0表示星期日，1表示星期一，以此类推）
  const firstDayWeekday = firstDay.getDay();
  
  // 获取该月的天数
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  
  // 创建日历数组（6行7列，一个月的日历最多需要6周来展示）
  const calendar = Array(6).fill().map(() => Array(7).fill(null));
  
  let date = 1;
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 7; j++) {
      if ((i === 0 && j < firstDayWeekday) || date > daysInMonth) {
        calendar[i][j] = null; // 不在当前月的日期
      } else {
        calendar[i][j] = date++;
      }
    }
  }
  
  return calendar;
}

const year = 2023;
const month = 4; // 5月（记得月份从0开始）
const monthCalendar = getDaysInMonth(year, month);
console.log(monthCalendar);

场景4：日期验证 - 检查用户输入的日期是否有效

javascript
function isValidDate(dateString) {
  // 尝试创建一个Date对象
  const date = new Date(dateString);
  
  // 检查Date对象是否有效
  return !isNaN(date.getTime());
}

console.log(isValidDate('2023-05-11')); // true
console.log(isValidDate('2023-13-11')); // false（没有13月）
console.log(isValidDate('2023-02-30')); // false（2月没有30日）

总结

通过本文，我们全面学习了JavaScript中日期获取的各种方法：

创建Date对象的多种方式
获取日期各组成部分的方法（年、月、日、星期、时、分、秒等）
获取UTC时间的方法
日期格式化的技巧
实际应用场景，如显示当前时间、计算日期差值、构建日历视图和验证日期

JavaScript的Date对象虽然有一些特殊之处（如月份从0开始），但掌握了这些方法后，你将能够在Web应用中灵活处理各种日期和时间问题。

练习

为了巩固所学知识，你可以尝试以下练习：

创建一个函数，将日期格式化为"YYYY年MM月DD日星期X"的形式
实现一个倒计时功能，显示距离某个特定日期还有多少天、小时、分钟和秒
创建一个简单的日历组件，可以显示当月的所有日期并标记今天
实现一个函数，计算某个日期是当年的第几天

附加资源

尝试将本文所学的知识应用到你的实际项目中，这将大大提高你对JavaScript日期处理能力的掌握。

介绍​

Date对象基础​

创建Date对象​

获取日期组成部分的方法​

获取年份​

获取月份​

获取日期（一个月中的第几天）​

获取星期（一周中的第几天）​

获取小时、分钟、秒和毫秒​

获取时间戳​

获取UTC时间（世界协调时间）​

日期格式化​

实际应用场景​

场景1：显示当前日期和时间​

场景2：计算两个日期之间的差值​

场景3：日历应用 - 获取某月的所有日期​

场景4：日期验证 - 检查用户输入的日期是否有效​

总结​

练习​

附加资源​

介绍