update src/components/DateRangePicker/index.js

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

Loading…
Cancel
Save