You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
65 lines
1.7 KiB
// it has style inside index.scss ---> // Start DateRangePicker && end DateRangePicker |
|
|
|
import React, { useEffect } 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"; |
|
|
|
const weekDays = [ |
|
"شنبه", |
|
"یکشنبه", |
|
"دوشنبه", |
|
"سشنبه", |
|
"چهارشنبه", |
|
"پنجشنبه", |
|
"جمعه", |
|
]; |
|
|
|
function CustomRangeInput({ openCalendar, value }) { |
|
useEffect(() => { |
|
openCalendar(); |
|
}, []); |
|
|
|
return ( |
|
<div className="flex flex-row items-center justify-center mt-3"> |
|
<input |
|
className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1" |
|
onFocus={openCalendar} |
|
value={value[0]} |
|
readOnly |
|
/> |
|
<p className="mx-2 text-sm">تا</p> |
|
<input |
|
className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1" |
|
onFocus={openCalendar} |
|
value={value[1]} |
|
readOnly |
|
/> |
|
</div> |
|
); |
|
} |
|
|
|
const DateRangePicker = () => { |
|
return ( |
|
<div className="w-full rtl flex flex-col-reverse"> |
|
<DatePicker |
|
range |
|
className="flex " |
|
calendar={persian} |
|
locale={persian_fa} |
|
fixMainPosition={true} |
|
fixRelativePosition={true} |
|
calendarPosition={`${"top"}-${"center"}`} |
|
offsetY={"10"} |
|
onClose={() => false} |
|
arrow={false} |
|
minDate={new Date()} |
|
render={<CustomRangeInput />} |
|
weekDays={weekDays} |
|
/> |
|
</div> |
|
); |
|
}; |
|
|
|
export default DateRangePicker;
|
|
|