JavaScript日期和时间处理手册

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

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

??

? 前言

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

本文将讲解:

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

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

?

第一节:Date对象

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

1. 不传参创建当前日期和时间的Date对象:

   let now = new Date();

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

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

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

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

4. 解析字符串创建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对象时间信息后,可以进行格式化后输出需要的日期字符串:

1. toISOString() 输出标准ISO格式

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

2. toUTCString()/toLocaleString() 输出UTC或本地格式
3. 自定义格式化

   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对象构建日期选择器:

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

????????合理运用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;

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

? 结语? ? ?

????????在这个内容丰富的指南中,我们全面介绍了JavaScript中处理日期和时间的各种方法 - 从Date对象的创建、各种获取时间方法、格式化显示、进行计算以及与时间戳相互转换等,涵盖了日期时间处理的方方面面。

????????同时,我们也提到了一些需要注意的重点,比如本地时间与UTC时间、时区和国际时间的处理等。最后,还给出了一些额外的资源,如Moment.js这样优秀的第三方库。

????????我尽力用通俗易懂的语言和示例代码做了全面的解读,希望这篇指南可以成为JavaScript日期和时间处理的参考指南,能够帮助大家快速上手。

????????如果您在学习和使用过程中,还有任何疑问或建议,欢迎在评论区与我互动讨论。时间处理是开发中必不可少的功能,希望我们可以共同进步。感谢您的观看!

?