problem with locale

[hmz22]

i creat custom ant design datepicker and use your lib:

import dayjsGenerateConfig from "rc-picker/lib/generate/dayjs";
import generatePicker from "antd/es/date-picker/generatePicker";
import fa from "antd/es/date-picker/locale/fa_IR";
import {
  PickerProps,
  RangePickerBaseProps,
  RangePickerDateProps,
  RangePickerTimeProps,
} from "antd/lib/date-picker/generatePicker";
import dayjs, { Dayjs } from "dayjs";
import generateCalendar, {
  CalendarProps,
} from "antd/lib/calendar/generateCalendar";
import "antd/dist/reset.css";
import calendarSystems from "@calidy/dayjs-calendarsystems";
import PersianCalendarSystem from "@calidy/dayjs-calendarsystems/calendarSystems/PersianCalendarSystem";

const locale = {
  name: "fa",
  weekdays: "یک‌شنبه_دوشنبه_سه‌شنبه_چهارشنبه_پنج‌شنبه_جمعه_شنبه".split("_"),
  weekdaysShort:
    "یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه".split(
      "_"
    ),
  weekdaysMin: "ی_د_س_چ_پ_ج_ش".split("_"),
  weekStart: 6,
  months:
    "فروردین_اردیبهشت_خرداد_تیر_مرداد_شهریور_مهر_آبان_آذر_دی_بهمن_اسفند".split(
      "_"
    ),
  monthsShort:
    "فروردین_اردیبهشت_خرداد_تیر_مرداد_شهریور_مهر_آبان_آذر_دی_بهمن_اسفند".split(
      "_"
    ),
  ordinal: function (n: any) {
    return n;
  },
  formats: {
    LT: "HH:mm",
    LTS: "HH:mm:ss",
    L: "DD/MM/YYYY",
    LL: "D MMMM YYYY",
    LLL: "D MMMM YYYY HH:mm",
    LLLL: "dddd, D MMMM YYYY HH:mm",
  },
  relativeTime: {
    future: "در %s",
    past: "%s پیش",
    s: "چند ثانیه",
    m: "یک دقیقه",
    mm: "%d دقیقه",
    h: "یک ساعت",
    hh: "%d ساعت",
    d: "یک روز",
    dd: "%d روز",
    M: "یک ماه",
    MM: "%d ماه",
    y: "یک سال",
    yy: "%d سال",
  },
};

dayjs.locale(locale, undefined, true);
dayjs.extend(calendarSystems);
dayjs.registerCalendarSystem("persian", new PersianCalendarSystem());

const CustomDate = generatePicker({
  ...dayjsGenerateConfig,
  locale: {
    ...dayjsGenerateConfig.locale,
  },
  getNow: () => dayjs().toCalendarSystem("persian"),
});

type CustomRangePickerProps =
  | RangePickerBaseProps<Dayjs>
  | RangePickerDateProps<Dayjs>
  | RangePickerTimeProps<Dayjs>;

function DatePickerJalali({ ...rest }: CustomRangePickerProps) {
  return (
    <>
      <CustomDate.RangePicker style={{ width: "100%" }} {...rest} locale={fa} />
    </>
  );
}

export const DatePickerJalaliSingle = ({ ...rest }: PickerProps<Dayjs>) => {
  return <CustomDate style={{ width: "100%" }} {...rest} locale={fa} />;
};

export default DatePickerJalali;

and my problem is locale with fa: and if see month name is wrong what problem my do? and also need default persian calender e.g:

dayjs(initialData.validityDate).toCalendarSystem(
          "persian"
        )

I must do for every where need convert but I need just global do it and when need other calendar type change it how can do it? thank you

[hmz22]

this sample of date picker: https://stackblitz.com/edit/react-xicmts?file=demo.tsx in demo file first is original antd date picker second is your Gregorian and third is Persian and also if check when use third date picker Persian calendar when hover on day have a little lag because of calendar system can fix it? for now for fixing month name in date picker i use this:

export const CustomDateJ = DatePicker.generatePicker({
  ...dayjsGenerateConfig,
  locale: {
    ...dayjsGenerateConfig.locale,
    getShortMonths: () => {
      return "فروردین_اردیبهشت_خرداد_تیر_مرداد_شهریور_مهر_آبان_آذر_دی_بهمن_اسفند".split(
        "_"
      );
    },
  },

  getNow: () => jDayjs(),
});

[amirhmoradi]

@hmz22 Hi, thanks for the info. I did a quick check on the code:

• the first datepicker (original antd) is showing wrong month names (it tries to do some weird transposition+translation) of months without conversion. -> in persian calendar, the first month is farvardin and it converts to march on gregorian. in the antd datepicker, the year seems to start on 01/Farvardin/2024 (note the year being in Gregorian, the month being in Persian). => Either there is something I did not understand about your antd integration or this is a bug in antd datepicker when used with farsi locale.

• the second one, seems to be default dayjs gregorian, without any apparent issues.

• the third one, that seems to be the calidy calendar systems persian calendar, shows the wrong months because you are forcing the locale definitions of dayjs with your own locale object. => From what I see, your locale object is wrong, as the months are not supposed to be translated, but they need to be converted, which is the main purpose of my plugin. => In the latest versions of dayjs I contributed to fix the error in the FA locale with other contributors and also in my plugin this is fixed for previous/legacy dayjs versions. You should not need to manipulate the locale.

=> I invite you to have a look on the unit tests that I have wrote inside my plugin's code to see how to use the correct month names in Farsi.

I will close this ticket as it does not bring up an issue with the project. If you think there is another bug somewhere, please open a new issue with relevant details.

Warmest.