Moment.js 用于在JavaScript中解析,验证,操作和显示日期和时间。是一款在项目中使用频率极高的时间格式化工具,Ant Design Vue 组件中就是使用它来处理时间的。
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
安装
npm install moment --save # npm yarn add moment # Yarn
在组件中引入
import moment from 'moment'
相关 API
1. 格式化日期
moment().format('MMMM Do YYYY, h:mm:ss a'); // February 26th 2023, 5:02:25 pm moment().format('dddd'); // Sunday moment().format("MMM Do YY"); // Feb 26th 23 moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023 moment().format(); // 2023-02-26T17:02:25+08:00
2. 相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 11 years ago moment("20120620", "YYYYMMDD").fromNow(); // 11 years ago moment().startOf('day').fromNow(); // 17 hours ago moment().endOf('day').fromNow(); // in 7 hours moment().startOf('hour').fromNow(); // 3 minutes ago
3. 日历时间
moment().subtract(10, 'days').calendar(); // 02/16/2023 moment().subtract(6, 'days').calendar(); // Last Monday at 5:03 PM moment().subtract(3, 'days').calendar(); // Last Thursday at 5:03 PM moment().subtract(1, 'days').calendar(); // Yesterday at 5:03 PM moment().calendar(); // Today at 5:03 PM moment().add(1, 'days').calendar(); // Tomorrow at 5:03 PM moment().add(3, 'days').calendar(); // Wednesday at 5:03 PM moment().add(10, 'days').calendar(); // 03/08/2023
封装一些常用的时间工具
// 日期相关 export const HDate = { // 年-月-日 shortTime (value, formater = 'YYYY-MM-DD HH:mm:ss') { return moment(value).format(formater) }, // 当前日期 getNowDate () { return this.shortTime(new Date()) }, // 当月第一天 00:00:00 monthOne () { return moment(this.getNowDate()).format('YYYY-MM-01 00:00:00') }, // 某一天的 00:00:00 startOfDay (date) { return moment(date).startOf('day').format('YYYY-MM-DD HH:mm:ss') }, // 某一天的 23:59:59 endOfDay (date) { return moment(date).endOf('day').format('YYYY-MM-DD HH:mm:ss') } }