JavaScript日期和时间处理手册

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》

✨ 前言

日期和时间在应用开发中是非常常用的功能。本文将全面介绍JavaScript中处理日期和时间的方法,让你可以快速上手各种日期操作。

本文将讲解:

创建和解析Date对象的各种方法
抽取日期的指定部分如年、月、日等
格式化日期显示不同格式字符串
通过偏移进行日期时间的计算
时间戳与Date的相互转化
处理时区和国际时间表示
Moment.js的便捷用法
如何实现一个日期选择器

准备掌握JavaScript的日期和时间处理技能了吗?让我们开始吧!

第一节:Date对象

Date对象在JavaScript中用于表示日期和时间,它是一个构造函数。创建Date对象有以下几种方式:

不传参创建当前日期和时间的Date对象:
```
let now = new Date();
```

传递表示日期时间的毫秒数创建Date对象:

let date = new Date(1674192000000); // 指定毫秒数

传递日期时间参数创建Date对象:

new Date(2023, 0, 1); // 2023-01-01
new Date(2023, 0, 1, 12, 0, 0); // 2023-01-01 12:00:00

解析字符串创建Date对象:
```
new Date('2023-01-01');
```

Date对象具有丰富的方法可以获取日期各个部分,进行格式化和计算。理解Date对象的创建方式,是学习日期处理的第一步。

第二节:获取时间

可以通过下列Date对象的方法获取到日期时间的细节部分:

getFullYear() 获取四位年份
getMonth() 获取月份(0-11)
getDate() 获取当前月中的天数(1-31)
getDay() 获取星期几(0-6)
getHours() 获取小时(0-23)
getMinutes() 获取分钟(0-59)
getSeconds() 获取秒(0-59)
getMilliseconds() 获取毫秒(0-999)
getTime() 获取总的毫秒数

例如获取当前时间:

let now = new Date();

now.getFullYear(); // 2023
now.getMonth(); // 0
now.getDate(); // 15
now.getDay(); // 1 表示星期二

getMonth()需要注意月份范围是0-11,实际月份要加1。这些方法可以获取Date对象表示时间的各个组成部分。

第三节:格式化日期

获取到Date对象时间信息后,可以进行格式化后输出需要的日期字符串:

toISOString() 输出标准ISO格式

let now = new Date();
now.toISOString(); // 2023-01-15T13:49:35.029Z

toUTCString()/toLocaleString() 输出UTC或本地格式

自定义格式化

let date = new Date();

let str = 
  date.getFullYear() + '-' +
  (date.getMonth() + 1) + '-' +
  date.getDate(); // 2023-01-15

第四节:日期计算

可以通过给Date对象的毫秒数做算术运算来计算新的日期:

let date = new Date(2023, 0, 1); // 2023-01-01

let newDate = new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);
// 5天后的日期

Date对象也提供了许多方法可以快捷计算新日期:

setDate(d) 设置日期
setMonth(m) 设置月份
setFullYear(y) 设置年份
setHours(h) 设置小时
setMinutes(m) 设置分钟
setSeconds(s) 设置秒

例如增加一个月:

let date = new Date(2023, 0, 1); 

date.setMonth(date.getMonth() + 1);

这些方法可以对Date对象进行日期时间的运算和偏移得到新日期。

第五节:时间戳转换

时间戳是从1970年1月1日到当前日期的总毫秒数。

Date对象与时间戳的相互转换:

// Date -> 时间戳
let date = new Date();
let ts = date.getTime();

// 时间戳 -> Date
let date = new Date(1673875600000);

时间戳是一个整数,可以更方便地进行存储和传输,并通过Date对象解析为本地时间。

接下来我将介绍日期的国际化和时区处理,以及一些实用的第三方库,欢迎提出您的意见!

第六节:国际时间和时区

Date对象默认创建的时间是当前环境的本地时间。我们可以转换为UTC时间:

let date = new Date();
date.toUTCString(); //转换为UTC时间

也可以显示特定时区的时间:

date.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'}); // 中国时区时间

处理时间对象时,需要注意时区问题,显示给用户的时间信息是否正确。

Date对象的时间原点

Date对象中的时间是以1970年1月1日00:00:00作为时间原点的,这个时间被称为Unix Epoch时间。Date对象中存储的毫秒数是从时间原点开始算起的。

这就是getTime()返回的毫秒数,以及创建Date对象时传入的毫秒数的参数代表的意义。

本地时间与UTC时间

Date对象默认首先创建表示当前环境的本地时间。我们可以通过转换显示UTC时间:

let d = new Date();
d.toUTCString();

UTC时间与本地时间可能存在时差,需要注意。在网络传输时推荐使用标准的UTC时间。

夏令时的影响

有一些地区实行夏令时,这会导致本地时间在夏令时期间会增加1个小时。

这可能会对表示当地时间造成影响,需要注意正确显示时间。

不同地区显示不同时区时间

展示给用户查看的时间信息,需要显示正确的时区时间,而不是固定的UTC时间:

d.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'});

根据用户所在地区动态显示本地格式和时区时间非常重要。

第七节:第三方库Moment.js

Moment.js是一个轻量的日期处理库,提供了更便捷的日期格式化和操作方法:

let now = moment();

now.format('YYYY-MM-DD'); // 格式化
now.add(1, 'd'); // 增加1天

Moment.js可以快速处理复杂的日期格式,计算跨度等操作。

第八节:日期选择控件

可以利用Date对象构建日期选择器:

生成年、月、日菜单供选择
计算选择的日期结果
高亮显示当前选择日期

合理运用Date对象的方法,可以实现功能强大的日期选择器,提高用户体验。

生成日期选择菜单

可以通过获取当前年月日信息,调用setFullYear()、setMonth()、setDate()方法生成年、月、日的选择菜单。

增加前后导航按钮可以切换年月。

选择日期时实时更新

可以给菜单添加onchange事件,当用户选择年、月、日时,实时构建选中的日期对象,并更新显示。

高亮今天日期

可以获取今天的日期,比较选择框中的日期,如果相同就添加特殊样式来高亮显示今天。

禁用不可选择日期

可以定一些规则,例如只能选择今天之后的日期,灰显过去的日期,通过启用disable属性来禁止选择。

国际化

可以根据不同语言和地区显示不同的日期文本,如月份名称等。

浮层显示

可以用浮动div将日期选择器渲染成一个浮层,点击输入框时弹出。

代码示例：


<div id="date-picker">

  <select id="year"></select>

  <select id="month"></select>
  
  <select id="day"></select>

  <div id="selected-date"></div>

</div>

// 生成年份选择菜单
const yearSelect = document.getElementById('year');

for (let i = 1990; i <= 2030; i++) {
  let opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  yearSelect.appendChild(opt);
}

// 生成月份选择菜单
const monthSelect = document.getElementById('month');

for (let i = 1; i <= 12; i++) {
  let opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  monthSelect.appendChild(opt);
} 

// 选择日期时更新显示
function updateDate() {
  let year = yearSelect.value;
  let month = monthSelect.value;
  let day = daySelect.value;

  let displayDate = year + '-' + month + '-' + day;

  selectedDate.innerHTML = displayDate; 
}

yearSelect.onchange = monthSelect.onchange = updateDate;

以上演示了基本的日期选择实现,还可以继续优化交互、样式等。