shop-admin/src/components/DatePicker.tsx

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 { 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,
    readOnly?: boolean;
    minDate?: Date;
};

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 formattedDate = `${value.year}/${value.month.number}/${value.day}`;
            props.onChange(formattedDate);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value]);

    useEffect(() => {
        if (props.defaulValue && !value) {
            const defaultDate = new DateObject({
                date: props.defaulValue,
                calendar: persian,
                locale: persian_fa,
            });
            setValue(defaultDate);
        }
    }, [props.defaulValue, value]);

    return (
        <div className="w-full">
            <div className='text-sm'>
                {props.label}
            </div>
            <div className={clx(
                'relative mt-1.5',
                props.readOnly && 'readOny'
            )}>
                <DatePicker
                    placeholder={props.placeholder}
                    value={value}
                    onChange={(date) => setValue(date as DateObject)}
                    calendar={persian}
                    locale={persian_fa}
                    calendarPosition="bottom-right"
                    className={props.className}
                    readOnly={props.readOnly}
                    minDate={props.minDate}
                />
                {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;