From 7904b51b841fee409f202742db067899714c4d1e Mon Sep 17 00:00:00 2001
From: Vasya Ponomarenko <777vasya77@gmail.com>
Date: Tue, 20 Sep 2022 14:40:12 +0300
Subject: [PATCH] feat(useDateFormat): support MMM and MMMM formatter

---
 packages/shared/useDateFormat/index.md      | 4 +++-
 packages/shared/useDateFormat/index.test.ts | 6 ++++++
 packages/shared/useDateFormat/index.ts      | 2 ++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/shared/useDateFormat/index.md b/packages/shared/useDateFormat/index.md
index bc2c75f8852..df619344b67 100644
--- 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
index f63a787a04e..f480764692f 100644
--- 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
index d632c35383d..f072fe9a3e5 100644
--- 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),