[BUG] - fa-IR locale in datepicker not working

[esmailshahbazi]

NextUI Version

2.4.8

Describe the bug

months name and years do not changing when i set locale "fa-IR" for NextUIProvider and I18nProvider

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

months name and years do not changing when i set locale "fa-IR" for NextUIProvider and I18nProvider

Expected behavior

months name and years do not changing when i set locale "fa-IR" for NextUIProvider and I18nProvider

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-1479 [BUG] - fa-IR locale in datepicker not working

[wingkwong]

please provide a minimal reproducible environment

[esmailshahbazi]

please provide a minimal reproducible environment

for example in this screenshot you see i set locale hi-IN-u-ca-indian but months name and years are gregory

and this is my provider.jsx <NextUIProvider> {children} </NextUIProvider>

numbers are persian because of my custom font in css

[esmailshahbazi]

Library version

@react-aria/i18n : 3.12.3 @internationalized/date: 3.5.6

NextUI Version 2.4.8

[wingkwong]

1. please paste the code here
2. can you also share your NextUIProvider?

[esmailshahbazi]

1. please paste the code here

2. can you also share your NextUIProvider?

NextUIProvider

<NextUIProvider> {children} </NextUIProvider>

Codes

import React from "react";
import { DatePicker } from "@nextui-org/react";
import { now, parseAbsoluteToLocal } from "@internationalized/date";
import { I18nProvider } from "@react-aria/i18n";

export default function Test() {
  let [date, setDate] = React.useState(
    parseAbsoluteToLocal("2021-04-07T18:45:22Z")
  );

  return (
    <div className="flex flex-col gap-4">
      <I18nProvider locale="hi-IN-u-ca-indian">
        <DatePicker
          showMonthAndYearPickers
          variant="bordered"
          className="max-w-md"
          label="Appointment date"
          value={date}
          onChange={setDate}
        />
      </I18nProvider>
    </div>
  );
}

Library version

"@nextui-org/react": "^2.4.8", "@internationalized/date": "^3.5.6", "@react-aria/i18n": "^3.12.3",

[esmailshahbazi]

and im using next ui in next.js 14 with app router

[esmailshahbazi]

please provide a minimal reproducible environment

i think datepicker doesn't work correctly in next.js framework please check this out

https://codesandbox.io/p/devbox/nextui-datepicker-locale-fa-ir-2kd2h9

live share code

https://codesandbox.io/p/live/908cb369-f35f-423c-9743-5be7b267ff24

[esmailshahbazi]

Can anyone solve this problem? Is there any hope?

[omidbaharifar]

I had a similar problem, downgrading @react-aria/i18n to version 3.11.1 solved the problem.