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