calidy-com / dayjs-calendarsystems

Day.js Calendar Systems Plugin : extends Day.js library to allow the use of non-gregorian calendar systems.
Other
15 stars 3 forks source link

problem with ant design custom datepicker #4

Closed hmz22 closed 2 months ago

hmz22 commented 2 months ago

i create custom datepicker with ant design:

import React from 'react';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker, {
  PickerProps,
} from 'antd/es/date-picker/generatePicker';
import dayjs, { Dayjs } from 'dayjs';
import jalaliday from '@zoomit/dayjs-jalali-plugin';
import fa from 'antd/es/date-picker/locale/fa_IR';

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.extend(jalaliday);
dayjs.locale(locale, undefined, true);
//gregory
dayjs.calendar('jalali');

const CustomDate = generatePicker(dayjsGenerateConfig);

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

export default CustomDatePicker;

but as you say leap year is wrong e.g 1403 is leap year and show esfand have 29 days. can you tell me how fix it? this is example link: https://stackblitz.com/edit/react-putxgu?file=demo.tsx

amirhmoradi commented 2 months ago

@hmz22 hi, as I can read in your provided code example, you are not using my plugin but rather the one by '@zoomit/dayjs-jalali-plugin'.

To see if this issue exists in my plugin @calidy/dayjs-calendarsystems please go ahead and follow the instructions from the README.md file (https://github.com/calidy-com/dayjs-calendarsystems/blob/main/README.md) and then test your code. Note: As you will see In the instructions, it is cited that you should not use any other calendar conversion plugins for dayjs.

I will close this issue. If you think it should be re-opened, please let me know.

hmz22 commented 2 months ago

yes I use other library but I don't know how use your library? u can see I change it to your library: https://stackblitz.com/edit/react-putxgu-yrpmaj?file=CustomDate.tsx but won't work

hmz22 commented 2 months ago

Any help?