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

// 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;