[BUG] - DatePicker internationalization behavior

[alirezatayebinejad]

NextUI Version

2.3.5

Describe the bug

when I add Persian language to the datepicker it works fine but when I open the year input and scroll down the years then the months suddenly turn back to the default locale instead of the persian months

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

just do this and open year and keep scroll down the years untill you see the months changes <I18nProvider locale="fa-IR"> <DatePicker showMonthAndYearPickers variant="bordered" className="max-w-md" label="Appointment date" value={date} onChange={setDate} /> </I18nProvider>

Expected behavior

do not change the month and it should stay in the desire locale

Screenshots or Videos

No response

Operating System Version

windows 10

Browser

Chrome

[linear[bot]]

ENG-704 [BUG] - DatePicker internationalization behavior

[wingkwong]

Can you share your code or a stackblitz link?

[alirezatayebinejad]

Can you share your code or a stackblitz link?

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

export default function App() {
  let [date, setDate] = React.useState<DateValue>(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>
  );
}

just run this and open the year and month selection start scrolling the years while watching the month after scrolling you will see the month words changes to another months system , it happens for other locals like Persian 'fa-IR'

[MhEsn]

Hello there, I exactly faced this issue. Did you fine any solution for that?

[wingkwong]

Just an update. I'm working on it.

[MhEsn]

After updating to newer version it has weirder behavior with <I18nProvider locale="fa-IR">.

 <I18nProvider locale="fa-IR">
                    <DatePicker
                      showMonthAndYearPickers
                      value={form.birthDate}
                      name="birthDate"
                      label="birthDate"
                      onChange={(value) => {
                        handleForm("birthDate", value);
                      }}
                    />
                  </I18nProvider>

It completely shows the years wrong. For example it should shows 1350 as a year but it shows 2550, almost 1200 years later.

[Ehsan256]

Any update for this issue? still has issue with "fa-IR" locale 😕.

[wingkwong]

hey can u DM me at discord (id: wingkwong). i need to understand more on fa-IR.

[ErfanMowlavian]

hey can u DM me at discord (id: wingkwong). i need to understand more on fa-IR.

is it fixed?

[wingkwong]

@ErfanMowlavian I made a PR.

[amin-mousavi]

date picker month and year problem in fa-IR solved? i need help I have this problem in next UI date picker in persian

[wingkwong]

@amin-mousavi

1. The PR is being under review
2. please subscribe https://github.com/nextui-org/nextui/issues/3602 instead