moment is a multi-language supported date processing library. How to use it in vue? First, attach the official website address: /, after all, searching for APIs is the right way to learn!
Use npm command to install moment
npm install moment --save
Refer to moment in file
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Moment from 'moment'
// Define global timestamp filter('formatDate', function(value) {
return Moment(value).format('YYYY-MM-DD HH:mm:ss')
})
= false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Use in components
<div class="time">{{ | formatDate}}</div>
Some commonly used date formatting methods
Date formatting
moment().format('MMMM Do YYYY, h:mm:ss a'); // April 16, 2019, 12:24:48 Noonmoment().format('dddd'); // Tuesdaymoment().format("MMM Do YY"); // April 16 19moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-04-16T12:24:48+08:00
Relative time
moment("20111031", "YYYYMMDD").fromNow(); // 7 years agomoment("20120620", "YYYYMMDD").fromNow(); // 7 years agomoment().startOf('day').fromNow(); // 12 hours agomoment().endOf('day').fromNow(); // Within 12 hoursmoment().startOf('hour').fromNow(); // 28 minutes ago
Calendar time
moment().subtract(10, 'days').calendar(); // April 6, 2019moment().subtract(6, 'days').calendar(); // Last Wednesday at 12:28 noonmoment().subtract(3, 'days').calendar(); // Last Saturday at 12:28 noonmoment().subtract(1, 'days').calendar(); // Yesterday at 12:28 noonmoment().calendar(); // Today is 12:28 noonmoment().add(1, 'days').calendar(); // tomorrow at 12:28 noonmoment().add(3, 'days').calendar(); // This Friday at 12:28 noonmoment().add(10, 'days').calendar(); // April 26, 2019
Multilingual support
moment().format('L'); // 2019-04-16
moment().format('l'); // 2019-04-16
moment().format('LL'); // April 16, 2019moment().format('ll'); // April 16, 2019moment().format('LLL'); // April 16, 2019 at 12:28 noonmoment().format('lll'); // April 16, 2019 at 12:28 noonmoment().format('LLLL'); // Tuesday, April 16, 2019 at 12:28 noonmoment().format('llll'); // Tuesday, April 16, 2019 at 12:28 noon
Description
| Format code | illustrate | Return value |
|---|---|---|
| YYYY | The year fully represented by four digits | For example: 1999 or 2019 |
| M | Months represented by numbers, without leading zeros | 1 ~ 12 |
| MM | Months represented by numbers, without leading zeros | 01 ~ 12 |
| MMM | The month represented by the three-letter abbreviation | January ~ December |
| MMMM | Months represented by numbers, without leading zeros | January ~ December |
| M | Month, full text format | 1 ~ 12 |
| D | What day of the month, no leading zeros | 1 ~ 31 |
| DD | What day of the month has leading zeros | 01 ~ 31 |
| d | What day of the week, the numbers indicate | 0 ~ 6, 0 means Sunday, 6 means Saturday |
| ddd | Three letters indicate the day of the week | Sunday ~ Saturday |
| dddd | Day of the week, full text of the week | Sunday ~ Saturday |
| HH | Hours, 24-hour system, leading zeros | 00 ~ 23 |
| H | Hours, 24-hour system, no leading zeros | 0 ~ 23 |
| hh | Hour, 12-hour system, leading zero | 00 ~ 12 |
| h | Hours, 12-hour system, no leading zeros | 0 ~ 12 |
| mm | Minutes, leading zeros | 00 ~ 59 |
| m | Minutes, no leading zeros | 0 ~ 59 |
| ss | Seconds, leading zeros | 01 ~ 59 |
| s | Seconds, no leading zeros | 1 ~ 59 |
Summarize
This is the article about vue using the Moment plug-in to format time. For more related content on vue using Moment, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!