hamid zarghami
92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import { useState, useEffect, type FC } from 'react';
|
|
import DatePicker from 'react-multi-date-picker';
|
|
import persian from 'react-date-object/calendars/persian';
|
|
import persian_fa from 'react-date-object/locales/persian_fa';
|
|
import DateObject from 'react-date-object';
|
|
import CalenderIcon from '../assets/images/calendar.svg'
|
|
import { clx } from '../helpers/utils';
|
|
|
|
type Props = {
|
|
onChange: (date: string) => void;
|
|
defaulValue?: string;
|
|
error_text?: string;
|
|
placeholder: string;
|
|
reset?: boolean;
|
|
isDateTime?: boolean;
|
|
className?: string;
|
|
label?: string
|
|
};
|
|
|
|
const DatePickerComponent: FC<Props> = (props: Props) => {
|
|
const [value, setValue] = useState<DateObject | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (props.reset) {
|
|
setValue(null);
|
|
}
|
|
}, [props.reset]);
|
|
|
|
useEffect(() => {
|
|
if (value) {
|
|
// تبدیل تاریخ شمسی به میلادی
|
|
const gregorianDate = value.toDate();
|
|
const year = gregorianDate.getFullYear();
|
|
const month = String(gregorianDate.getMonth() + 1).padStart(2, '0');
|
|
const day = String(gregorianDate.getDate()).padStart(2, '0');
|
|
const formattedDate = `${year}-${month}-${day}`;
|
|
props.onChange(formattedDate);
|
|
} else {
|
|
props.onChange('');
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [value]);
|
|
|
|
useEffect(() => {
|
|
if (props.defaulValue) {
|
|
const defaultDate = new DateObject({
|
|
date: props.defaulValue,
|
|
calendar: persian,
|
|
locale: persian_fa,
|
|
});
|
|
const currentValueStr = value ? `${value.year}-${value.month.number}-${value.day}` : null;
|
|
const defaultValueStr = `${defaultDate.year}-${defaultDate.month.number}-${defaultDate.day}`;
|
|
if (currentValueStr !== defaultValueStr) {
|
|
setValue(defaultDate);
|
|
}
|
|
} else if (!props.defaulValue && value) {
|
|
setValue(null);
|
|
}
|
|
}, [props.defaulValue]);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{props.label &&
|
|
<div className='text-sm'>
|
|
{props.label}
|
|
</div>}
|
|
<div className={clx(
|
|
'relative ',
|
|
props.label && 'mt-1.5'
|
|
)}>
|
|
<DatePicker
|
|
placeholder={props.placeholder}
|
|
value={value}
|
|
onChange={(date) => setValue(date as DateObject)}
|
|
calendar={persian}
|
|
locale={persian_fa}
|
|
calendarPosition="bottom-right"
|
|
className={`rmdp-mobile ${props.className}`}
|
|
/>
|
|
{props.error_text && props.error_text !== '' && (
|
|
<div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
|
|
{props.error_text}
|
|
</div>
|
|
)}
|
|
|
|
<img src={CalenderIcon} className='absolute top-0 bottom-0 my-auto left-2' />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DatePickerComponent; |