基本概念

Moment.js：JavaScript 日期處理類庫

官方文檔

http://momentjs.cn/docs/

解決方案

安裝

npm install moment --save

直接引入

var moment = require('moment'); moment().format();

全局過濾器?

main.js中

import moment from 'moment' //定義一個全局過濾器實現日期格式化 Vue.filter('datrfmt',function (input,fmtstring) {//當input為時間戳時，需轉為Number類型// 使用momentjs這個日期格式化類庫實現日期的格式化功能return moment(input).format(fmtstring); });

vue文件中

<p class="subtitle"><span>發表時間：{{ createTime | datefmt('YYYY-MM-DD HH:mm:ss')}}</span> ??</p>

全局方法

在vue實例掛載moment方法

main.js中

import moment from 'moment' Vue.prototype.$moment = moment

vue文件中

const createDate = this.$moment(this.createTime).format('YYYY-MM-DD') //2019-04-11

中文化

import moment from 'moment' import 'moment/locale/zh-cn' Vue.prototype.$moment = moment

?國際化參考：http://momentjs.cn/docs/#/i18n/

?自定義中文化：

import moment from 'moment' // 里面的字符可以根據自己的需要進行調整 moment.locale('zh-cn', {months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),weekdaysMin: '日_一_二_三_四_五_六'.split('_'),longDateFormat: {LT: 'HH:mm',LTS: 'HH:mm:ss',L: 'YYYY-MM-DD',LL: 'YYYY年MM月DD日',LLL: 'YYYY年MM月DD日Ah點mm分',LLLL: 'YYYY年MM月DD日ddddAh點mm分',l: 'YYYY-M-D',ll: 'YYYY年M月D日',lll: 'YYYY年M月D日 HH:mm',llll: 'YYYY年M月D日dddd HH:mm'},meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,meridiemHour: function (hour, meridiem) {if (hour === 12) {hour = 0;}if (meridiem === '凌晨' || meridiem === '早上' ||meridiem === '上午') {return hour;} else if (meridiem === '下午' || meridiem === '晚上') {return hour + 12;} else {// '中午'return hour >= 11 ? hour : hour + 12;}},meridiem: function (hour, minute, isLower) {const hm = hour * 100 + minute;if (hm < 600) {return '凌晨';} else if (hm < 900) {return '早上';} else if (hm < 1130) {return '上午';} else if (hm < 1230) {return '中午';} else if (hm < 1800) {return '下午';} else {return '晚上';}},calendar: {sameDay: '[今天]LT',nextDay: '[明天]LT',nextWeek: '[下]ddddLT',lastDay: '[昨天]LT',lastWeek: '[上]ddddLT',sameElse: 'L'},dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,ordinal: function (number, period) {switch (period) {case 'd':case 'D':case 'DDD':return number + '日';case 'M':return number + '月';case 'w':case 'W':return number + '周';default:return number;}},relativeTime: {future: '%s內',past: '%s前',s: '幾秒',ss: '%d秒',m: '1分鐘',mm: '%d分鐘',h: '1小時',hh: '%d小時',d: '1天',dd: '%d天',M: '1個月',MM: '%d個月',y: '1年',yy: '%d年'},week: {// GB/T 7408-1994《數據元和交換格式·信息交換·日期和時間表示法》與ISO 8601:1988等效dow: 1, // Monday is the first day of the week.doy: 4 // The week that contains Jan 4th is the first week of the year.} })

DMEO

moment(new Date()).format('MM月DD日'); // 09月01日 moment(new Date()).format('MMM'); // 9月 moment(new Date()).format('MMMM'); // 九月 moment(new Date()).format('dd'); // 六 moment(new Date()).format('ddd'); // 周六 moment(new Date()).format('dddd'); // 星期六 moment(new Date()).isoWeekday(); // 6 moment(new Date()).isoWeekYear(); // 2018 moment(new Date()).format('LT'); // 16:56 moment(new Date()).format('LTS'); // 16:56:34 moment(new Date()).format('L'); // 2018-09-01 moment(new Date()).format('LL'); // 2018年09月01日 moment(new Date()).format('LLL'); // 2018年09月01日下午4點56分 moment(new Date()).format('LLLL'); // 2018年09月01日星期六下午4點56分 moment(new Date()).format('l'); // 2018-9-1 moment(new Date()).format('ll'); // 2018年9月1日 moment(new Date()).format('lll'); // 2018年9月1日 16:56 moment(new Date()).format('llll'); // 2018年9月1日星期六 16:56 moment(new Date()).format('A'); // 下午 moment(new Date()).format('a'); // 下午 moment(new Date()).format('ALT') // 下午17:09 // subtract 減法 、 add 加法 moment().add(7, days).format('LL'); // 7天后的日期 2018年09月08日 moment().subtract(7, 'days').format('LL'); // 7天前的日期 2018年08月25日 moment().add(9, 'hours').format('HH:mm:ss'); // 9小時后 01:56:34 moment().add(1, 'week').format('LL'); // 1周后 2018年09月08日 // fromNow 時差 (之前) ; fromNow(true) 去除前或者內字 moment([2017, 0, 29]).fromNow(true); // 2年 moment([2017, 0, 29]).fromNow(); // 2年前 moment([2019, 0, 29]).fromNow(true); // 5個月 moment([2019, 0, 29]).fromNow(); // 5個月內 moment("20120901", "YYYYMMDD").fromNow(); // 6年前 moment(+new Date() - 1000 * 300).fromNow(); // 5分鐘前 moment(+new Date() - 1000 * 3).fromNow(); // 幾秒前 moment(+new Date() - 3 * 24 * 60 * 60 * 1000).fromNow(); // 3天前 moment(+new Date() - 30 * 24 * 60 * 60 * 1000).fromNow(); // 1個月前 moment(+new Date() - 365 * 24 * 60 * 60 * 1000).fromNow(); // 1年前 // toNow 時差 (之后 現在為基準) ; toNow(true) 去除前或者內字 moment([2007, 0, 29]).toNow() // 12年內 moment([2020, 0, 29]).toNow() // 1年前 moment([2020, 0, 29]).toNow(true) // 1年 // 時差 (之后) ; to(true) // 去除前或者內字 moment([2007, 0, 29]).to() // 12年內 moment([2020, 0, 29]).to() // 1年前 moment([2020, 0, 29]).to(true) // 1年 // 時差 (毫秒) moment([2007, 0, 29]).diff(moment([2007, 0, 28])); // 86400000 // 時差 (天) moment([2007, 0, 29]).diff(moment([2007, 0, 28]), 'days') // 1 // 天數 (月) moment("2012-02", "YYYY-MM").daysInMonth() // 29

?

參考文章

https://www.cnblogs.com/huhanhaha/p/9436803.html

https://blog.csdn.net/qq_37899792/article/details/89204270

https://blog.csdn.net/mighty13/article/details/51767884

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue——整合与中文化Moment.js解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。