update src/components/Datepicker/Calender/index.js, src/components/Datepicker/CalenderList/index.js and src/components/SearchDesign/SearchBox/index.js

master
mahdi 2 years ago
parent 8a36e3a711
commit 66b7880133
  1. 17
      src/components/Datepicker/Calender/index.js
  2. 27
      src/components/Datepicker/CalenderList/index.js

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { Calendar } from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian";
@ -14,10 +14,19 @@ const weekDays = [
"جمعه",
];
const Calender = () => {
const Calender = ({ minimumDate, maximumDate, setDate, date }) => {
// const [date, setDate] = useState("1401/03/01");
return (
<div className="calender-list">
<Calendar
onChange={setDate}
value={date}
minDate={minimumDate}
maxDate={maximumDate}
weekDays={weekDays}
arrow={false}
calendar={persian}
locale={persian_fa}
mapDays={({ date }) => {
let props = {};
let isWeekend = date.weekDay.index === 6;
@ -26,10 +35,6 @@ const Calender = () => {
return props;
}}
weekDays={weekDays}
arrow={false}
calendar={persian}
locale={persian_fa}
/>
</div>
);

@ -1,14 +1,17 @@
import React from "react";
import React, { useState } from "react";
import Calender from "../Calender";
import Button from "../../ButtonDesign/Button/";
import Button from "../../ButtonDesign/Button";
import SearchBox from "../../SearchDesign/SearchBox";
const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
const [date, setDate] = useState("1401/02/01");
return (
<div className="flex flex-col bg-white mx-auto">
<div className="w-[96%] mx-auto flex flex-row items-center">
<div className="flex flex-col bg-white mx-auto p-5">
<div className="w-[96%] mx-auto flex flex-row items-center justify-between mb-7">
{/* right side */}
<div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
<div className="flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
{/* right side */}
<div className="flex flex-row items-center px-4 text-primaryText">
<img src={rightArrow} class="w-8" alt="right-arrow" />
@ -26,10 +29,20 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
))}
</div>
</div>
{/* left side ---> search box */}
<SearchBox
searchBoxHolder={"w-[220px]"}
className="bg-background border-background focus:border-background focus:ring-background"
/>
</div>
{/* ? calender list */}
<div className="flex flex-wrap space-between gap-5">
<Calender />
<div className="flex flex-wrap justify-around mx-auto gap-x-5">
<Calender
onChange={setDate}
value={date}
minimumDate={"1401/02/01"}
maximumDate={"1401/02/31"}
/>
<Calender />
<Calender />
<Calender />

Loading…
Cancel
Save