vue,js 时间格式化库moment使用。js获取时间日期 电脑版发表于:2019/7/19 15:19 [TOC] 官方网站:http://momentjs.cn/ **moment库有点大,推荐可以使用day.js** 官网:https://dayjs.fenxianglu.cn/ Element-plus中可以直接使用: ``` import { dayjs } from 'element-plus' ``` ### 安装: ``` npm install moment ``` ##### 引入 ``` // 引入moment库 var moment = require('moment'); // 或者这样引入 import moment from "moment" ``` ### 常用格式化 年月日时分秒: ``` // 引入moment库 var moment = require('moment'); // 或者这样引入 import moment from "moment" let val = moment("2023-4-4 16:12:15").format('YYYY-MM-DD HH:mm:ss') ``` 如果只要,月日时分秒就这样: ``` this.$moment(element.eventsTime).format('MM-DD HH:mm:ss') ``` 其他常用格式化 ``` //设定moment区域为中国 moment.locale('zh-cn'); //任意时间戳格式化,以YYYY-MM-DD HH:mm:ss形式显示 var t1 = moment(1411641720000).format("YYYY-MM-DD HH:mm:ss"); console.log(t1); //获取前一天日期,格式以YYYY-MM-DD形式显示 var t11 = moment().day(0).format('YYYY-MM-DD'); console.log(t11); //获取本周五日期,格式以YYYY-MM-DD形式显示 var t12 = moment().weekday(5).format('YYYY-MM-DD'); console.log(t12); //获取上周五日期,格式以YYYY-MM-DD形式显示 var t13 = moment().weekday(-3).format('YYYY-MM-DD'); console.log(t13); //获取当前年份、月份、日期 var t14 = moment().year(); var t15 = moment().month();//此处月份从0开始,当前月要+1 var t16 = moment().date(); console.log(`${t14}-${t15+1}-${t16}`); //例如:我想获取去年今天的完整日期,如:今天是2018-7-23,我要输出的是2017-7-23 console.log(`${t14-1}-${t15+1}-${t16}`); //获取上个月今天的日期,格式以YYYY-MM-DD显示 var t18 = moment().subtract(1, 'months').format('YYYY-MM-DD'); console.log(t18); //获取上个月日期,格式以YYYY-MM显示 var t19 = moment().subtract(1, 'months').format('YYYY-MM'); console.log(t19); //获取前一天日期,格式以YYYY-MM-DD显示 var t20 = moment().subtract(1, 'days').format('YYYY-MM-DD'); console.log(t20); //获取去年今天的日期,格式以YYYY-MM-DD显示,即简便的获取去年今天日期的方法 var t21 = moment().subtract(1, 'year').format('YYYY-MM-DD'); console.log(t21); //获取两个小时之后的时间 var t22 = moment().add(2,'hours').format('YYYY-MM-DD HH:mm:ss'); console.log(t22); //例如:今天2018-7-23,获取到的时间是2018-7-18 var t23 = moment().subtract(5, 'days').format('YYYY-MM-DD'); console.log(t23); ``` ### 在main.js中全局引入(也可单独在使用的文件中引入,具体看需求) ``` import moment from "moment" Vue.prototype.$moment = moment; ``` 全局引用后就可以这样使用了 ``` this.$moment(element.eventsTime).format('MM-DD HH:mm:ss') ``` ### 日期格式化,相对时间,历时间 日期格式化: ``` moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 6日 2023, 1:00:58 下午 moment().format('dddd'); // 星期四 moment().format("MMM Do YY"); // 4月 6日 23 moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023 moment().format(); // 2023-04-06T13:00:58+08:00 ``` 相对时间: ``` moment("20111031", "YYYYMMDD").fromNow(); // 11 年前 moment("20120620", "YYYYMMDD").fromNow(); // 11 年前 moment().startOf('day').fromNow(); // 13 小时前 moment().endOf('day').fromNow(); // 11 小时内 moment().startOf('hour').fromNow(); // 1 分钟前 ``` 日历时间: ``` moment().subtract(10, 'days').calendar(); // 2023/03/27 moment().subtract(6, 'days').calendar(); // 上星期五13:00 moment().subtract(3, 'days').calendar(); // 上星期一13:00 moment().subtract(1, 'days').calendar(); // 昨天13:00 moment().calendar(); // 今天13:00 moment().add(1, 'days').calendar(); // 明天13:00 moment().add(3, 'days').calendar(); // 下星期日13:00 moment().add(10, 'days').calendar(); // 2023/04/16 ```