81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { useMemo, useState } 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 { type DateOfBirthProps } from '../../types/settingForm';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
import { Calendar } from 'iconsax-react';
|
|
|
|
export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
|
|
const { t, i18n } = useTranslation('completionForm');
|
|
const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
|
|
const [openView, setOpenView] = useState<'year' | 'month' | 'day'>('year');
|
|
|
|
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}>{dayNumber}</PickersDay>;
|
|
};
|
|
|
|
const CustomCalendarIcon = () => (
|
|
<Icon Component={Calendar} color="primary.main" variant="Bold" />
|
|
);
|
|
|
|
return (
|
|
<LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
|
|
<DatePicker
|
|
label={t('completion.dateOfBirth')}
|
|
value={value}
|
|
onChange={onChange}
|
|
format={formatString}
|
|
dayOfWeekFormatter={dayOfWeekFormatter}
|
|
slots={{ day: CustomDay, openPickerIcon: CustomCalendarIcon }}
|
|
disableFuture
|
|
openTo="year"
|
|
views={['year', 'month', 'day']}
|
|
view={openView}
|
|
onViewChange={(newView) => setOpenView(newView)}
|
|
onYearChange={() => setOpenView('month')}
|
|
slotProps={{
|
|
textField: { fullWidth: true },
|
|
popper: {
|
|
sx: {
|
|
'& .MuiDateCalendar-root': { width: '309px' },
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
);
|
|
}
|