78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { useMemo } from 'react';
|
|
import {
|
|
DatePicker,
|
|
PickersDay,
|
|
type PickersDayProps,
|
|
} from '@mui/x-date-pickers';
|
|
import { LocalizationProvider } from '@mui/x-date-pickers';
|
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
|
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
|
|
import { enUS } from 'date-fns/locale';
|
|
import { faIR as faIRJalali } from 'date-fns-jalali/locale';
|
|
import { getDay } from 'date-fns-jalali';
|
|
import { format as formatJalali } from 'date-fns-jalali';
|
|
import { format } from 'date-fns';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { toLocaleDigits } from '@/utils/persianDigit';
|
|
import { type DateOfBirthProps } from '../../types/settingForm';
|
|
|
|
export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
|
|
const { t, i18n } = useTranslation('completionForm');
|
|
const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
|
|
|
|
const { Adapter, locale, formatString, dayOfWeekFormatter } = useMemo(() => {
|
|
if (isFarsi) {
|
|
const persianDays = ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'];
|
|
return {
|
|
Adapter: AdapterDateFnsJalali,
|
|
locale: faIRJalali,
|
|
formatString: 'yyyy/MM/dd',
|
|
dayOfWeekFormatter: (date: Date) => persianDays[getDay(date)],
|
|
};
|
|
}
|
|
return {
|
|
Adapter: AdapterDateFns,
|
|
locale: enUS,
|
|
formatString: 'MM/dd/yyyy',
|
|
dayOfWeekFormatter: undefined,
|
|
};
|
|
}, [isFarsi]);
|
|
|
|
const CustomDay = (props: PickersDayProps) => {
|
|
const dayNumber = isFarsi
|
|
? formatJalali(props.day, 'dd')
|
|
: format(props.day, 'dd');
|
|
return (
|
|
<PickersDay {...props}>
|
|
{toLocaleDigits(dayNumber, i18n.language)}
|
|
</PickersDay>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
|
|
<DatePicker
|
|
label={toLocaleDigits(t('completion.dateOfBirth'), i18n.language)}
|
|
value={value}
|
|
onChange={onChange}
|
|
format={formatString}
|
|
dayOfWeekFormatter={dayOfWeekFormatter}
|
|
slots={{ day: CustomDay }}
|
|
slotProps={{
|
|
textField: {
|
|
fullWidth: true,
|
|
},
|
|
popper: {
|
|
sx: {
|
|
'& .MuiDateCalendar-root': {
|
|
// TODO: fix this to use textfield width instead of defining hardcode
|
|
width: '309px',
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
);
|
|
}
|