vue3时间转换插件-Moment.js的使⽤⼀.组件官⽹
1. moment.js时间转换插件
2. Moment Timezone 时区处理类库
⼆.vue项⽬中使⽤
我这⾥使⽤的是vue3的写法
npm install moment --save
或者
npm install moment-timezone --save
在main.js中引⼊
import moment from 'moment'
或
import moment from "moment-timezone";
插件绑到Vue的prototype上
import App from './App.vue'
const app = createApp(App)
# vue2引⽤⽅式  Vue.prototype.$moment = 'moment'
三.页⾯中使⽤
我这⾥是引⽤的时区的包。
意思为将时间传⼊转化为悉尼时间 时间格式为：MMMM Do YYYY, h:mm:ss a
this.$moment(传⼊的时间).tz('Australia/Sydney').format('MMMM Do YYYY, h:mm:ss a')
四.官⽅使⽤⽰例
1.Moment.js
⽇期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // ⼗⼆⽉10⽇2021, 12:36:11 下午
moment().format('dddd');                    // 星期五
moment().format("MMM Do YY");              // 12⽉10⽇21
moment().format('YYYY [escaped] YYYY');    // 2021 escaped 2021
moment().format();                          // 2021-12-10T12:36:11+08:00
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 10年前
moment("20120620", "YYYYMMDD").fromNow(); // 9年前
moment().startOf('day').fromNow();        // 13⼩时前
moment().endOf('day').fromNow();          // 11⼩时内
moment().startOf('hour').fromNow();      // 36分钟前
⽇历时间
moment().subtract(10, 'days').calendar(); // 2021/11/30
moment().subtract(6, 'days').calendar();  // 上星期六12:36
moment().subtract(3, 'days').calendar();  // 上星期⼆12:36
moment().subtract(1, 'days').calendar();  // 昨天12:36
moment().calendar();                      // 今天12:36
moment().add(1, 'days').calendar();      // 明天12:36
moment().add(3, 'days').calendar();      // 下星期⼀12:36
moment().add(10, 'days').calendar();      // 2021/12/20
<-timezone
在任何时区格式化⽇期
var jun = moment("2014-06-01T12:00:00Z");
var dec = moment("2014-12-01T12:00:00Z");
<('America/Los_Angeles').format('ha z');  // 5am PDT
<('America/Los_Angeles').format('ha z');  // 4am PST
<('America/New_York').format('ha z');    // 8am EDT
<('America/New_York').format('ha z');    // 7am EST
<('Asia/Tokyo').format('ha z');          // 9pm JST
<('Asia/Tokyo').format('ha z');          // 9pm JST
<('Australia/Sydney').format('ha z');    // 10pm EST
<('Australia/Sydney').format('ha z');    // 11pm EST
在时区之间转换⽇期
var newYork    = ("2014-06-01 12:00", "America/New_York");
var losAngeles = newYork.clone().tz("America/Los_Angeles");
var london    = newYork.clone().tz("Europe/London");
newYork.format();    // 2014-06-01T12:00:00-04:00
losAngeles.format(); // 2014-06-01T09:00:00-07:00
london.format();    // 2014-06-01T17:00:00+01:00
更多使⽤⽅式请看⽂档。
五.国际化语⾔-中⽂语⾔包
const momentCN={
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年'
vuejs流程图插件},
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.
}
}
export default momentCN
引⼊语⾔包
moment.locale('zh-cn',momentCN);