Vue3 time plugin - Moment.js use

The date and time part is reflected in js, but it is not very convenient to use, especially in the vue framework, it is impossible for us to use it like that, it seems clumsy and troublesome, so I will bring you a useful one this time The time plug-in is the Moment time plug-in. It is very small, easy to use, and compatible with vue3. Let me introduce it in detail below.

 

The first is the official website of Moment.js : http://momentjs.cn/

Then download and use the plugin

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

You can download and use according to your own needs

Moment.js configuration

1. The configuration in main.js is as follows:

import { createApp } from 'vue'
const app = createApp(App);
import moment from 'moment';
moment.locale('zh-cn');
app.config.globalProperties.$moment = moment

2. Just use our time plug-in in the corresponding component, simply give an example:

<script setup>
import moment from "moment";
console.log(moment().format('YYYY-MM-DD dddd HH:mm:ss'));
</script>

Just format and use according to your favorite time

Share with you the following commonly used time formatting methods:

moment().format('MMMM Do YYYY, h:mm:ss a'); // 七月 25日 2023, 12:09:09 中午
moment().format('dddd');                    // 星期二
moment().format("MMM Do YY");               // 7月 25日 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();                          // 2023-07-25T12:09:09+08:00

moment("20111031", "YYYYMMDD").fromNow(); // 12 年前
moment("20120620", "YYYYMMDD").fromNow(); // 11 年前
moment().startOf('day').fromNow();        // 12 小时前
moment().endOf('day').fromNow();          // 12 小时后
moment().startOf('hour').fromNow();       // 10 分钟前

moment().subtract(10, 'days').calendar(); // 2023/07/15
moment().subtract(6, 'days').calendar();  // 上周三12:10
moment().subtract(3, 'days').calendar();  // 上周六12:10
moment().subtract(1, 'days').calendar();  // 昨天12:10
moment().calendar();                      // 今天12:10
moment().add(1, 'days').calendar();       // 明天12:10
moment().add(3, 'days').calendar();       // 本周五12:10
moment().add(10, 'days').calendar();      // 2023/08/04

moment.locale();         // zh-cn
moment().format('LT');   // 12:10
moment().format('LTS');  // 12:10:35
moment().format('L');    // 2023/07/25
moment().format('l');    // 2023/7/25
moment().format('LL');   // 2023年7月25日
moment().format('ll');   // 2023年7月25日
moment().format('LLL');  // 2023年7月25日中午12点10分
moment().format('lll');  // 2023年7月25日 12:10
moment().format('LLLL'); // 2023年7月25日星期二中午12点10分
moment().format('llll'); // 2023年7月25日星期二 12:10