react-ymd-date-select
react-ymd-date-select copied to clipboard
JP和暦の表記に対応してほしい
有用なライブラリとしてありがたく使用させていただきました。 クライアントから西暦+和暦の表記を希望されております。 とりあえず急ぎだったのでフォークして使用いたしました。
ひとまず下記のような実装にしてみましたが……。
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で対応しました。 この実装ではなくても良いので、西暦と和暦の併記などに対応していただけると嬉しいです。