53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import DatePicker from 'react-multi-date-picker'
|
|
import type { DateObject } from 'react-multi-date-picker'
|
|
import persian from 'react-date-object/calendars/persian'
|
|
import persian_fa from 'react-date-object/locales/persian_fa'
|
|
import { toISODate, toJalaliDateObject } from '../../utils/date'
|
|
|
|
type JalaliDatePickerProps = {
|
|
/** مقدار ذخیرهشده — ISO میلادی (YYYY-MM-DD) */
|
|
value: string
|
|
/** تغییر مقدار — همیشه ISO میلادی برمیگرداند تا ذخیرهسازی یکدست بماند */
|
|
onChange: (isoDate: string) => void
|
|
id?: string
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* انتخابگر تاریخ شمسی (react-multi-date-picker) با تقویم و locale فارسی.
|
|
* نمایش جلالی است اما مقدار ذخیرهشده ISO میلادی میماند.
|
|
*/
|
|
export function JalaliDatePicker({
|
|
value,
|
|
onChange,
|
|
id,
|
|
placeholder = 'انتخاب تاریخ',
|
|
disabled = false,
|
|
className = '',
|
|
}: JalaliDatePickerProps) {
|
|
return (
|
|
<DatePicker
|
|
id={id}
|
|
value={toJalaliDateObject(value)}
|
|
onChange={(selected) => {
|
|
const picked = Array.isArray(selected) ? selected[0] : selected
|
|
if (!picked) return
|
|
onChange(toISODate(picked as DateObject))
|
|
}}
|
|
calendar={persian}
|
|
locale={persian_fa}
|
|
format="YYYY/MM/DD"
|
|
calendarPosition="bottom-right"
|
|
className={`aramesh-datepicker ${className}`}
|
|
containerClassName="w-full"
|
|
inputClass="w-full cursor-pointer border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
mobileLabels={{ OK: 'تأیید', CANCEL: 'انصراف' }}
|
|
portal
|
|
/>
|
|
)
|
|
}
|