fix(DatePicker): date picker month label with "year first" locales (#21174)

fucadzi · devadula-nandan · heloiselui · web-flow · commit 1a9ccca45f06 · 2026-04-20T13:08:34.000Z
* fix: localised month name insertion

* docs: contributors list

* chore: merge conflict

* test(datepicker): cover locale month-label regression

---------

Co-authored-by: Nandan Devadula &lt;47176249+devadula-nandan@users.noreply.github.com&gt;
Co-authored-by: “heloiselui” &lt;helolui27@gmail.com&gt;
Co-authored-by: Heloise Lui &lt;71858203+heloiselui@users.noreply.github.com&gt;
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -2171,6 +2171,15 @@
         "doc",
         "code"
       ]
+    },
+    {
+      "login": "fucadzi",
+      "name": "Natalija Fucadzi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8070263?v=4",
+      "profile": "https://github.com/fucadzi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
@@ -387,6 +387,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/suniltc-ibm"><img src="https://avatars.githubusercontent.com/u/186133269?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sunil TC</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=suniltc-ibm" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/baadhira"><img src="https://avatars.githubusercontent.com/u/69342013?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Badira P P</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=baadhira" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/harishjanardhanan"><img src="https://avatars.githubusercontent.com/u/32760275?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Harish</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=harishjanardhanan" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=harishjanardhanan" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/fucadzi"><img src="https://avatars.githubusercontent.com/u/8070263?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Natalija Fucadzi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=fucadzi" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -1428,9 +1428,41 @@ describe('Date picker with locale', () => {
     await userEvent.click(screen.getByTestId('input'));
     const year = screen.getByDisplayValue('2022');
     const month = screen.getByText('1月');
+    const monthYearContainer = year.closest('.flatpickr-current-month');
     expect(year).toBeInTheDocument();
     expect(month).toBeInTheDocument();
     expect(month.compareDocumentPosition(year)).toBe(2);
+    expect(monthYearContainer).toContainElement(month);
+  });
+
+  it('should update month label on navigation for year-month locales', async () => {
+    render(
+      <DatePicker
+        onChange={() => {}}
+        datePickerType="single"
+        locale="lv"
+        value="01/01/2022">
+        <DatePickerInput
+          id="date-picker-input-id"
+          placeholder="mm/dd/yyyy"
+          labelText="Date picker label"
+          data-testid="input"
+        />
+      </DatePicker>
+    );
+
+    await userEvent.click(screen.getByTestId('input'));
+    const year = screen.getByDisplayValue('2022');
+    const monthYearContainer = year.closest('.flatpickr-current-month');
+    // eslint-disable-next-line testing-library/no-node-access
+    const monthElement = monthYearContainer.querySelector('.cur-month');
+    const initialMonthLabel = monthElement.textContent;
+    // eslint-disable-next-line testing-library/no-node-access
+    const nextMonthButton = document.querySelector('.flatpickr-next-month');
+
+    await userEvent.click(nextMonthButton);
+
+    expect(monthElement.textContent).not.toBe(initialMonthLabel);
   });
 });
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -110,7 +110,7 @@ const carbonFlatpickrMonthSelectPlugin = (config) => (fp) => {
         } else {
           fp.yearElements[0]
             .closest(config.selectorFlatpickrMonthYearContainer)
-            .insertAdjacentElement('afterend', monthElement);
+            .insertAdjacentElement('beforeend', monthElement);
         }
 
         return monthElement;

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ const carbonFlatpickrMonthSelectPlugin = (config) => (fp) => {`
`110`	`110`	`} else {`
`111`	`111`	`fp.yearElements[0]`
`112`	`112`	`.closest(config.selectorFlatpickrMonthYearContainer)`
`113`		`- .insertAdjacentElement('afterend', monthElement);`
	`113`	`+ .insertAdjacentElement('beforeend', monthElement);`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`return monthElement;`