vue3使用moment详解

moment.js是用来处理日期时间的格式化插件，官网：http://momentjs.cn/

1. 安装moment插件

npm install moment //npm
yarn add moment //yarn 

2. 引入插件并中文化

// utils.ts
import moment from 'moment'
import 'moment/dist/locale/zh-cn'
moment.locale('zh-cn') //中文化

3. 封装函数

// utils.ts
// 获取年-月-日 时:分:秒
export const getFullTime = (time?: string) => {
    if(time){
        return moment(time).format('YYYY-MM-DD HH:mm:ss');
    }else {
        return moment().format('YYYY-MM-DD HH:mm:ss');
    }
}

// 获取星期几
export const getWeek = (time?: string) => {
    if(time){
        return moment(time).format('dddd');
    }else {
        return moment().format('dddd');
    }
}

4. 使用

import { getFullTime, getWeek } from "@/utils"

getFullTime() // 2024-02-05 11:19:16
getWeek() // 星期一

5. 常用的时间格式化示例

moment().format('YYYY年MM月DD日 HH:mm:ss');  // 2024年02月05日 11:42:05
moment().format('MMMM Do YYYY, h:mm:ss a');  // 二月 5日 2024, 11:42:57 中午
moment().format('dddd');                     // 星期一
moment().format("MMM Do YY");                // 2月 5日 24
moment("20140709", "YYYYMMDD").fromNow();    // 10 年前
moment().startOf('day').fromNow();           // 12 小时前
moment().startOf('hour').fromNow();          // 45 分钟前
moment().subtract(1, 'days').calendar();     // 昨天11:45
moment().add(1, 'days').calendar();          // 明天11:45
moment().format('LT');   // 11:49
moment().format('LTS');  // 11:49:30
moment().format('L');    // 2024/02/05
moment().format('l');    // 2024/02/05
moment().format('LL');   // 2024年02月05日
moment().format('ll');   // 2024年02月05日
moment().format('LLL');  // 2024年02月05日下午1点05分
moment().format('lll');  // 2024年02月05日 13:05
moment().format('LLLL'); // 2024年02月05日星期一下午1点05分
moment().format('llll'); // 2024年02月05日星期一 13:05