whitphx / react-ymd-date-select

Hooks and components for Y-M-D dropdowns with React
https://whitphx.github.io/react-ymd-date-select/
MIT License
45 stars 6 forks source link

JP和暦の表記に対応してほしい #90

Open araera111 opened 1 year ago

araera111 commented 1 year ago

有用なライブラリとしてありがたく使用させていただきました。 クライアントから西暦+和暦の表記を希望されております。 とりあえず急ぎだったのでフォークして使用いたしました。

ひとまず下記のような実装にしてみましたが……。

export interface UseDateSelectOptions {
  firstYear?: number;
  lastYear?: number;
  defaultYear?: number | "now";
  defaultMonth?: number | "now";
  defaultDay?: number | "now";
  locale?: Locale;
  yearFormat?: string;
  monthFormat?: string;
  dayFormat?: string;
  isJpEra?: boolean; //->追加した
}
  const labelToYearFormatJPEra = (
    yearFormat: string | undefined,
    isJpEra: boolean | undefined,
    i: number
  ) => {
    if (isJpEra) {
      const formatter = new Intl.DateTimeFormat("ja-JP-u-ca-japanese", {
        year: "numeric",
      });
      const date = new Date(i, 0, 1);
      const result = formatter.format(date);
      return yearFormat
        ? formatDate(date, yearFormat, { locale }) + `(${result})`
        : i.toString() + `(${result})`;
    }

    return yearFormat
      ? formatDate(new Date(i, 0, 1), yearFormat, { locale })
      : i.toString();
  };

  const rawYearOptions = useMemo(() => {
    const firstYear =
      opts.firstYear != null ? opts.firstYear : DEFAULT_FIRST_YEAR;
    const lastYear =
      opts.lastYear != null ? opts.lastYear : new Date().getFullYear();
    return range(firstYear, lastYear).map((i) => {
      const label = labelToYearFormatJPEra(yearFormat, opts.isJpEra, i);
      return { value: convertToSelectValue(i), label };
    });
  }, [opts.firstYear, opts.lastYear, locale, yearFormat]);

date-fnsで和暦対応する方法がわからず、Intl.Datetimeで対応しました。 この実装ではなくても良いので、西暦と和暦の併記などに対応していただけると嬉しいです。