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.
 
 
 

69 lines
1.5 KiB

import React from "react";
import { Calendar } from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian";
import persian_fa from "react-date-object/locales/persian_fa";
import DatePanel from "react-multi-date-picker/plugins/date_panel";
const weekDays = [
"شنبه",
"یکشنبه",
"دوشنبه",
"سشنبه",
"چهارشنبه",
"پنجشنبه",
"جمعه",
];
function CustomButton({ direction, handleClick, disabled }) {
return (
<i
onClick={handleClick}
style={{
padding: "0 10px",
fontWeight: "bold",
color: disabled ? "gray" : "blue",
}}
className={disabled ? "cursor-default" : "cursor-pointer"}
>
{direction === "right" ? ">" : "<"}
</i>
);
}
// function CustomRangeInput({openCalendar, value}) {
// let from = value[0] || ""
// let to = value[1] || ""
// value = from && to ? "از " + from + "، تا " + to": from
// return (
// <input
// onFocus={openCalendar}
// value={value}
// readOnly
// />
// )
// }
const DateRangePicker = () => {
return (
<>
<Calendar
arrow={<div style={{ backgroundColor: "red" }}>arrow</div>}
range
calendar={persian}
locale={persian_fa}
weekDays={weekDays}
minDate={new Date()}
renderButton={<CustomButton />}
// render={<CustomRangeInput />}
calendarPosition="bottom-right"
plugins={[<DatePanel position="bottom" />]}
/>
</>
);
};
export default DateRangePicker;