Vue中如何处理日期与时间

日期和时间处理是Web应用中常见的需求,Vue作为一款流行的前端框架,提供了很多方便的工具和库,以满足不同业务场景下的需求。本文将介绍如何在Vue中处理日期和时间,包括使用原生JavaScript、Moment.js和Day.js。

在这里插入图片描述

使用原生JavaScript

JavaScript提供了一些原生的日期和时间处理函数,我们可以在Vue应用中直接使用它们。下面介绍一些常用的函数。

Date对象

Date对象是JavaScript原生的日期和时间处理对象,它提供了很多常用的方法和属性,可以方便地对日期和时间进行操作。下面是一些常用的方法和属性。

获取当前日期和时间

可以使用new Date()方法来获取当前日期和时间。例如:

const now = new Date();
console.log(now); // Fri Jun 11 2023 09:00:00 GMT+0800 (China Standard Time)
获取指定日期和时间

可以使用new Date(year, month, day, hour, minute, second, millisecond)方法来获取指定日期和时间。其中,year表示年份(必填),month表示月份(0-11,必填),day表示日期(1-31,必填),hour表示小时(0-23,可选,默认为0),minute表示分钟(0-59,可选,默认为0),second表示秒数(0-59,可选,默认为0),millisecond表示毫秒数(0-999,可选,默认为0)。例如:

const date = new Date(2023, 5, 11);
console.log(date); // Fri Jun 11 2023 00:00:00 GMT+0800 (China Standard Time)

const time = new Date(2023, 5, 11, 9, 30);
console.log(time); // Fri Jun 11 2023 09:30:00 GMT+0800 (China Standard Time)
获取日期和时间的各个部分

可以使用getFullYear()getMonth()getDate()getDay()getHours()getMinutes()getSeconds()getMilliseconds()方法来获取日期和时间的各个部分。其中,getMonth()返回的是月份(0-11),getDay()返回的是星期几(0-6)。例如:

const now = new Date();
console.log(now.getFullYear()); // 2023
console.log(now.getMonth()); // 5
console.log(now.getDate()); // 11
console.log(now.getDay()); // 5
console.log(now.getHours()); // 9
console.log(now.getMinutes()); // 0
console.log(now.getSeconds()); // 0
console.log(now.getMilliseconds()); // 0
格式化日期和时间

可以使用toLocaleDateString()toLocaleTimeString()toLocaleString()方法来格式化日期和时间。其中,toLocaleDateString()返回的是日期字符串,toLocaleTimeString()返回的是时间字符串,toLocaleString()返回的是日期和时间字符串。例如:

const now = new Date();
console.log(now.toLocaleDateString()); // 2023/6/11
console.log(now.toLocaleTimeString()); // 09:00:00
console.log(now.toLocaleString()); // 2023/6/11 下午9:00:00

时间戳

时间戳是指从1970年1月1日00:00:00 UTC开始计算的毫秒数。可以使用Date.now()方法来获取当前时间戳。例如:

const timestamp = Date.now();
console.log(timestamp); // 1654933200000

正则表达式

可以使用正则表达式来对日期和时间进行格式化。下面是一些常用的正则表达式。

yyyy

表示年份,例如:2023。

const now = new Date();
const year = now.getFullYear();
console.log(year); // 2023
MM

表示月份,例如:06。

const now = new Date();
const month = now.getMonth() + 1;
console.log(month.toString().padStart(2, '0')); // 06
dd

表示日期,例如:11。

const now = new Date();
const date = now.getDate();
console.log(date.toString().padStart(2, '0')); // 11
HH

表示小时,例如:09。

const now = new Date();
const hours = now.getHours();
console.log(hours.toString().padStart(2, '0')); // 09
mm

表示分钟,例如:00。

const now = new Date();
const minutes = now.getMinutes();
console.log(minutes.toString().padStart(2, '0')); // 00
ss

表示秒数,例如:00。

const now = new Date();
const seconds = now.getSeconds();
console.log(seconds.toString().padStart(2, '0')); // 00

可以使用这些正则表达式来格式化日期和时间。例如:

const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const date = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const formatted = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
console.log(formatted); // 2023-06-11 09:00:00

使用Moment.js

Moment.js是一款流行的 JavaScript 日期库,提供了丰富的日期和时间处理函数,可以方便地对日期和时间进行操作。下面介绍一些常用的函数。

安装Moment.js

可以使用npm或yarn来安装Moment.js。例如:

npm install moment

使用Moment.js

可以使用moment()方法来创建一个Moment对象。例如:

const now = moment();
console.log(now); // moment("2023-06-11T09:00:00.000")

可以使用format()方法来格式化日期和时间。例如:

const now = moment();
const formatted = now.format('YYYY-MM-DD HH:mm:ss');
console.log(formatted); // 2023-06-11 09:00:00

可以使用add()方法和subtract()方法来增加或减少日期和时间。例如:

const now = moment();
const nextWeek = now.add(1, 'weeks');
const lastWeek = now.subtract(1, 'weeks');
console.log(nextWeek.format('YYYY-MM-DD')); // 2023-06-18
console.log(lastWeek.format('YYYY-MM-DD')); // 2023-06-04

可以使用startOf()方法和endOf()方法来获取日期和时间的开始和结束。例如:

const now = moment();
const startOfToday = now.startOf('day');
const endOfToday = now.endOf('day');
console.log(startOfToday.format('YYYY-MM-DD HH:mm:ss')); // 2023-06-11 00:00:00
console.log(endOfToday.format('YYYY-MM-DD HH:mm:ss')); // 2023-06-11 23:59:59

可以使用diff()方法来计算两个日期之间的差值。例如:

const start = moment('2023-06-01');
const end = moment('2023-06-11');
const diff = end.diff(start, 'days');
console.log(diff); // 10

使用Day.js

Day.js是另一款流行的JavaScript日期库,与Moment.js类似,提供了丰富的日期和时间处理函数,可以方便地对日期和时间进行操作。下面介绍一些常用的函数。

安装Day.js

可以使用npm或yarn来安装Day.js。例如:

npm install dayjs

使用Day.js

可以使用dayjs()方法来创建一个Day.js对象。例如:

const now = dayjs();
console.log(now); // dayjs("2023-06-11T09:00:00.000Z")

可以使用format()方法来格式化日期和时间。例如:

const now = dayjs();
const formatted = now.format('YYYY-MM-DD HH:mm:ss');
console.log(formatted); // 2023-06-11 09:00:00

可以使用add()方法和subtract()方法来增

Logo

前往低代码交流专区

更多推荐