Time format configuration format commonly used by the frontend

This article was last updated on: February 7, 2024 pm

overview

A lot of the software I use now (e.g. Code, Obsidian, PicGo) or front-end browser plugins (e.g. Markdownload) or static site generators (e.g. Hexo) are based on JavaScript technology. The configuration items here often involve the configuration of the time format. Time-related libraries are often used in the moments.js library.

Moments.js has been used successfully in millions of projects and contributes to making dates and times better on the web. As of September 2020, Moment has over 12 million weekly downloads!

Moments.js format

This is the most robust display option. It accepts a token string and replaces them with their corresponding values.

1
2
3
4
5
moment().format();                                // "2014-09-08T08:02:17-05:00" (ISO 8601, no fractional seconds)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA"); // "Sun, 3PM"
moment().format("[Today is] dddd"); // "Today is Sunday"
moment('gibberish').format('YYYY MM DD'); // "Invalid date"

| Token | Output | |
| :---- | :----- | — ||
| month | M | 1 2 … 11 12 |
| | Mo | 1st 2nd … 11th 12th |
| | MM | 01 02 … 11 12 |
| | MMM | Jan Feb … Nov Dec |
| | MMMM | January February … November December |
| Days of the month | D | 1 2 … 30 31 |
| | Do | 1st 2nd … 30th 31st |
| | DD | 01 02 … 30 31 |
| Day of the week | d | 0 1 … 5 6 |
| | do | 0th 1st … 5th 6th |
| | dd | Su Mo … Fr Sa |
| | ddd | Sun Mon … Fri Sat |
| | dddd | Sunday Monday … Friday Saturday |
| The first week of the year | w | 1 2 … 52 53 |
| | wo | 1st 2nd … 52nd 53rd |
| | ww | 01 02 … 52 53 |
| year | YY | 70 71 … 29 30 |
| | YYYY | 1970 1971 … 2029 2030 |
| | Y | 1970 1971 … 9999 +10000 +10001
concentrate: This document complies with the ISO 8601 standard and applies to dates after 9999 |
| AM/PM | A | AM PM |
| | a | am pm |
| time | H | 0 1 … 22 23 |
| | HH | 00 01 … 22 23 |
| | h | 1 2 … 11 12 |
| | hh | 01 02 … 11 12 |
| | k | 1 2 … 23 24 |
| | kk | 01 02 … 23 24 |
| divide | m | 0 1 … 58 59 |
| | mm | 00 01 … 58 59 |
| second | s | 0 1 … 58 59 |
| | ss | 00 01 … 58 59 |
| Fractional Second | S | 0 1 … 8 9 |
| | SS | 00 01 … 98 99 |
| | SSS | 000 001 … 998 999 |
| | SSSS … SSSSSSSSS | 000[0…] 001[0…] … 998[0…] 999[0…] |
| time zone | z or zz | EST CST … MST PST Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon. |
| | Z | -07:00 -06:00 … +06:00 +07:00 |
| | ZZ | -0700 -0600 … +0600 +0700 |
| Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 |

Localized format

Because the preferred format varies depending on the locale, you can use some markup to format a moment in time based on the locale.

There are uppercase and lowercase variations on the same format. The lowercase version is an abbreviated version of its uppercase version.

Time LT 8:30 PM
Time with seconds LTS 8:30:25 PM
Month numeral, day of month, year L 09/04/1986
l 9/4/1986
Month name, day of month, year LL September 4, 1986
ll Sep 4, 1986
Month name, day of month, year, time LLL September 4, 1986 8:30 PM
lll Sep 4, 1986 8:30 PM
Month name, day of month, day of week, year, time LLLL Thursday, September 4, 1986 8:30 PM
llll Thu, Sep 4, 1986 8:30 PM

Default format

The call is unformatted moment#format will default to moment.defaultformat。 At this point,moment.defaultFormat is ISO8601 format YYYY-MM-DDTHH:mm:ssZ

As of version 2.13.0, in UTC mode, the default format is defined by moment.defaultFormatUtc Control, format YYYY-MM-DDTHH:mm:ss[Z]。 This will return Z as an offset instead+00:00

Example

Like what:

  • My browser plugin is configured to:YYYY-MM-DD HH:mm:ss, the display effect is:2021-09-18 15:36:16
  • My obsidian template plugin is configured as:YYYY-MM-DD_ddd, the display effect is:2021-09-14_周二
  • My blog is configured as:LL a, the display effect is:2021 年 9 月 18 日 下午

📑 Reference Links:

Moment.js format


Time format configuration format commonly used by the frontend
https://e-whisper.com/posts/11415/
Author
east4ming
Posted on
September 18, 2021
Licensed under