Date Format

Date Format Plugin

Simple date format plugin for vue-formily.


yarn add @vue-formily/date-format
npm install @vue-formily/date-format --save


You can use date-format plugin with a script tag and a CDN, import the library like this:

<script src=""></script>

This will inject a DateFormatPlugin global object, which you will use to access the various methods exposed by the plugin or register to vue-formily.

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import dateFormat from ''

For locales:

<!-- Get the en-US locale -->
<script src=""></script>

Set Up

Vue 3.x

import { createApp } from 'vue'
import { createFormily } from '@vue-formily/formily';
import dateFormat from '@vue-formily/date-format';

const formily = createFormily();

formily.plug(dateFormat, {} as DateFormatOptions);

const app = createApp(App)


Vue 2.x

import Vue from 'vue';
import { createFormily } from '@vue-formily/formily';
import dateFormat from '@vue-formily/date-format';

const formily = createFormily();

formily.plug(dateFormat, {} as DateFormatOptions);



type Locale = {
  code: string;
  localize?: Record<string, any>;

type DateFormatOptions = {
  // 1 -> 7 ~ monday -> sunday
  firstDayOfWeek?: number;
  // 1 -> 7
  minimalDaysInFirstWeek?: number;
  timeZone?: string | number;
  locale?: string;
  locales?: Locale[];

Date and Time Patterns

Date and time formats are specified by date and time pattern strings. Within date and time pattern strings, unquoted letters from A to Z and from a to z are interpreted as pattern letters representing the components of a date or time string. Text can be quoted using single quotes ' to avoid interpretation. '' represents a single quote. All other characters are not interpreted; they're simply copied into the output string during formatting or matched against the input string during parsing.

The following pattern letters are defined (all other characters from 'A' to 'Z' and from 'a' to 'z' are reserved):

LetterDate or Time ComponentPresentationExamples
GEra designatorTextAD
yYearYear1996; 96
YWeek yearYear2009; 09
MMonth in yearMonthJuly; Jul; 07
wWeek in yearNumber27
WWeek in monthNumber2
DDay in yearNumber189
dDay in monthNumber10
FDay of week in monthNumber2
EDay name in weekTextTuesday; Tue
uDay number of week (1 = Monday, ..., 7 = Sunday)Number1
aAm/pm markerTextPM
HHour in day (0-23)Number0
kHour in day (1-24)Number24
KHour in am/pm (0-11)Number0
hHour in am/pm (1-12)Number12
mMinute in hourNumber30
sSecond in minuteNumber55
zTime zoneGeneral time zonePacific Standard Time; PST; GMT-08:00
ZTime zoneRFC 2822 time zone-0800
XTime zoneISO 8601 time zone-08; -0800; -08:00

Pattern letters are usually repeated, as their number determines the exact presentation:

  • Text - If the number of pattern letters is 4 or more, the full form is used; otherwise a short or abbreviated form is used if available.

  • Number - The number of pattern letters is the minimum number of digits, and shorter numbers are zero-padded to this amount.

  • Year - If the number of pattern letters is 2, the year is truncated to 2 digits; otherwise it is interpreted as a number.

  • Month - If the number of pattern letters is 3 or more, the month is interpreted as text; otherwise, it is interpreted as a number.

  • General time zone - Time zones are interpreted as text if they have names. For time zones representing a GMT offset value, the following syntax is used:

    • GMTOffsetTimeZone:

      GMT Sign Hours : Minutes

      Sign - one of + -

      Hours - Digit or Digit Digit

      Minutes - Digit Digit

      Digit - one of 0 1 2 3 4 5 6 7 8 9

    • Hours must be between 0 and 23, and Minutes must be between 00 and 59.

  • RFC 2822 time zone - The RFC 2822 4-digit time zone format is used:

    • RFC822TimeZone:

      Sign TwoDigitHours Minutes

      TwoDigitHours - Digit Digit

    • TwoDigitHours must be between 00 and 23. Other definitions are as for general time zones.

  • ISO 8601 Time zone - The number of pattern letters designates the format for both formatting and parsing as follows:

    • ISO8601TimeZone:

      OneLetterISO8601TimeZone - Sign TwoDigitHours, Z

      TwoLetterISO8601TimeZone - Sign TwoDigitHours Minutes, Z

      ThreeLetterISO8601TimeZone - Sign TwoDigitHours : Minutes, Z

    • Other definitions are as for general time zones or RFC 2822 time zones. If the offset value from GMT is 0, Z is produced. If the number of pattern letters is 1, any fraction of an hour is ignored. For example, if the pattern is X and the time zone is GMT+05:30, +05 is produced.

Basic Usage

Stand Along

import dateFormat from '@vue-formily/date-format';
import enUS from '@vue-formily/date-format/locale/en-US';

// Set locale to en-US
dateFormat.options.locale = enUS.code;
// Register global locales
dateFormat.options.locales = [enUS];

const date = new Date('2020-12-27T08:06:10.941Z');

dateFormat.format("yyyy.MM.dd G 'at' HH:mm:ss z", date); // 2020.12.27 A at 15:06:10 GMT+7
dateFormat.format('yyyyy.MMMMM.dd GGG hh:mm aaa', date); // 02020.December.27 Anno Domini 03:06 PM
dateFormat.format("EEE, MMMM d, ''yy", date); // Sunday, Dec 27, '20
dateFormat.format("h:mm a", date); // 3:06 PM
dateFormat.format("hh 'o''clock' a, zzzz", date); // 03 o'clock PM, Indochina Time
dateFormat.format("K:mm a, z", date); // 3:06 PM, GMT+7
dateFormat.format("yyyy-MM-dd'T'HH:mm:ss.SSSZ", date); // 2020-12-27T15:06:10.941+0700
dateFormat.format("yyyy-MM-dd'T'HH:mm:ss.SSSXXX", date); // 2020-12-27T15:06:10.941+07

In Vue Formily's Field

After installing Date Format Plugin, we can use the format option in the FieldSchema. Note that the schema's type has to be date.

// Sample schema
  formId: 'time',
  // Type has te be date
  type: 'date',
  format: 'K:mm a, z'



Format the input string.


format(format: string, date: number | Date | { value: Date }, options?: DateFormatOptions): string;


  • format - The format string.
  • date - The valid date instance.
Edit this page on GitHub Updated at Fri, Feb 4, 2022