update src/components/DateRangePicker/index.js

master
Your Name 2 years ago
parent 09d76d6d63
commit 9731ef208e
  1. 39
      src/components/DateRangePicker/index.js

@ -1,10 +1,11 @@
import React from "react";
import React, { useState, useEffect } 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";
import DatePicker from "react-multi-date-picker";
const weekDays = [
"شنبه",
@ -32,35 +33,39 @@ function CustomButton({ direction, handleClick, disabled }) {
);
}
// function CustomRangeInput({openCalendar, value}) {
// let from = value[0] || ""
// let to = value[1] || ""
function CustomRangeInput({ openCalendar, value }) {
// let from = value[0] || "";
// let to = value[1] || "";
// value = from && to ? "از " + from + "، تا " + to": from
// value = from && to ? "از " + from + "، تا " + to": from
useEffect(() => {
openCalendar();
}, []);
// return (
// <input
// onFocus={openCalendar}
// value={value}
// readOnly
// />
// )
// }
return (
<div>
<input onFocus={openCalendar} value={value[0]} readOnly />
<input onFocus={openCalendar} value={value[1]} readOnly />
</div>
);
}
const DateRangePicker = () => {
const [shouldOpenCalendar, setShouldOpenCalendar] = useState(true);
return (
<>
<Calendar
arrow={<div style={{ backgroundColor: "red" }}>arrow</div>}
<DatePicker
arrow={false}
range
calendar={persian}
locale={persian_fa}
weekDays={weekDays}
minDate={new Date()}
renderButton={<CustomButton />}
// render={<CustomRangeInput />}
render={<CustomRangeInput />}
calendarPosition="bottom-right"
plugins={[<DatePanel position="bottom" />]}
// plugins={[<DatePanel position="bottom" />]}
/>
</>
);

Loading…
Cancel
Save