update App.js, src/components/DateRangePicker/index.js and src/components/TestComponentNew/index.js

master
mahdi andalib 2 years ago
parent 6b4a0f2eb4
commit 60d39f8f54
  1. 2
      src/App.js
  2. 2
      src/components/DateRangePicker/index.js
  3. 54
      src/components/TestComponentNew/index.js

@ -171,7 +171,7 @@ function App() {
{/* <IndianaDragScroll /> */}
{/* <IconText /> */}
{/* <CustomToast /> */}
{/* <DateRangePicker /> */}
<DateRangePicker />
{/* <div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">

@ -37,7 +37,7 @@ 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();
}, []);

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useState, useEffect } from "react";
import "./index.scss";
@ -8,7 +8,52 @@ 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 DisablePassedDaies({ 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
useEffect(() => {
openCalendar();
}, []);
return (
<div>
<input onFocus={openCalendar} value={value[0]} readOnly />
<input onFocus={openCalendar} value={value[1]} readOnly />
</div>
);
}
const TestComponentNew = () => {
const [shouldOpenCalendar, setShouldOpenCalendar] = useState(false);
return (
<div
className="bg-pink-100 w-1/2 mx-auto mt-20"
@ -17,13 +62,18 @@ const TestComponentNew = () => {
<Calendar calendar={persian} locale={persian_fa} />
<hr className="my-20" />
<DatePicker
range
calendar={persian}
locale={persian_fa}
fixMainPosition={true}
fixRelativePosition={true}
calendarPosition={`${"bottom"}-${"center"}`}
calendarPosition={`${"top"}-${"center"}`}
onClose={() => false}
arrow={false}
minDate={new Date()}
renderButton={<DisablePassedDaies />}
render={<CustomRangeInput />}
weekDays={weekDays}
inputClass="custom-input"
className="custom-calendar"
style={{

Loading…
Cancel
Save