feat(useDateFormat): support MMM and MMMM formatter (#2234)

vueuse · Sep 21, 2022 · 39b2776 · 39b2776
1 parent f3ae7c8
commit 39b2776
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/shared/useDateFormat/index.md b/packages/shared/useDateFormat/index.md
@@ -9,11 +9,13 @@ Get the formatted date according to the string of tokens passed in, inspired by
 **List of all available formats (HH:mm:ss by default):**
 
 | Format | Output           | Description                           |
-| ------ | ---------------- | ------------------------------------- |
+|--------| ---------------- |---------------------------------------|
 | `YY`   | 18               | Two-digit year                        |
 | `YYYY` | 2018             | Four-digit year                       |
 | `M`    | 1-12             | The month, beginning at 1             |
 | `MM`   | 01-12            | The month, 2-digits                   |
+| `MMM`  | Jan-Dec          | The abbreviated month name            |
+| `MMMM` | January-December | The full month name                   |
 | `D`    | 1-31             | The day of the month                  |
 | `DD`   | 01-31            | The day of the month, 2-digits        |
 | `H`    | 0-23             | The hour                              |

diff --git a/packages/shared/useDateFormat/index.test.ts b/packages/shared/useDateFormat/index.test.ts
@@ -37,4 +37,10 @@ describe('useDateFormat', () => {
   it('should work with YYYY/MM/DD dddd', () => {
     expect(useDateFormat(new Date('2022-01-01 15:05:05'), 'YYYY/MM/DD dddd', { locales: 'en-US' }).value).toBe('2022/01/01 Saturday')
   })
+  it('should work with MMM DD YYYY', () => {
+    expect(useDateFormat(new Date('2022-01-01 15:05:05'), 'MMM DD YYYY', { locales: 'en-US' }).value).toBe('Jan 01 2022')
+  })
+  it('should work with MMMM DD YYYY', () => {
+    expect(useDateFormat(new Date('2022-01-01 15:05:05'), 'MMMM DD YYYY', { locales: 'en-US' }).value).toBe('January 01 2022')
+  })
 })
diff --git a/packages/shared/useDateFormat/index.ts b/packages/shared/useDateFormat/index.ts
@@ -30,6 +30,8 @@ export const formatDate = (date: Date, formatStr: string, locales?: Intl.Locales
     YYYY: () => years,
     M: () => month + 1,
     MM: () => `${month + 1}`.padStart(2, '0'),
+    MMM: () => date.toLocaleDateString(locales, { month: 'short' }),
+    MMMM: () => date.toLocaleDateString(locales, { month: 'long' }),
     D: () => String(days),
     DD: () => `${days}`.padStart(2, '0'),
     H: () => String(hours),