parent
509ebb8807
commit
2b3e436156
10 changed files with 929 additions and 11 deletions
@ -0,0 +1,22 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
import DatePicker from "../Calendar/CalendarComponents"; |
||||||
|
|
||||||
|
const RangeDatePicker = () => { |
||||||
|
const [selectedDayRange, setSelectedDayRange] = useState({ |
||||||
|
from: null, |
||||||
|
to: null, |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<DatePicker |
||||||
|
value={selectedDayRange} |
||||||
|
calendarClassName="range-date-picker" |
||||||
|
onChange={setSelectedDayRange} |
||||||
|
inputPlaceholder="یک بازه زمانی انتخاب کنید" |
||||||
|
shouldHighlightWeekends |
||||||
|
locale="fa" |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RangeDatePicker; |
||||||
@ -0,0 +1,750 @@ |
|||||||
|
.Calendar *{ |
||||||
|
font-family: 'iranSans'; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input { |
||||||
|
background: #fff; |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.4); |
||||||
|
padding: 0.6em 1.2em; |
||||||
|
font-family:'iranSans'; |
||||||
|
text-align: center; |
||||||
|
font-size: 12px; |
||||||
|
border-radius: 7px; |
||||||
|
|
||||||
|
} |
||||||
|
.DatePicker__input:focus{ |
||||||
|
outline:1px solid #06BACE; |
||||||
|
color: #06BACE; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input.-rtl { |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input::placeholder { |
||||||
|
color: #979797; |
||||||
|
} |
||||||
|
.DatePicker__input:focus::placeholder{ |
||||||
|
color: #06BACE; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { |
||||||
|
top: auto; |
||||||
|
bottom: calc(100% + 10px); |
||||||
|
transform: translateY(-2.5rem) rotate(180deg); |
||||||
|
animation: fadeArrowFlipped 0.3s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer { |
||||||
|
position: absolute; |
||||||
|
top: calc(100% + 20px); |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top { |
||||||
|
top: auto; |
||||||
|
bottom: calc(100% + 20px); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar, |
||||||
|
.Calendar * { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
direction: ltr; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar, |
||||||
|
.Calendar.-rtl * { |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarArrow { |
||||||
|
position: absolute; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
top: calc(100% + 10px); |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
margin: 0 auto; |
||||||
|
border-style: solid; |
||||||
|
z-index: 10; |
||||||
|
border-width: 0 10px 10px 10px; |
||||||
|
border-color: transparent transparent #fff transparent; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.Calendar { |
||||||
|
--cl-color-black: #444444; |
||||||
|
--cl-color-disabled: #d4d4d4; |
||||||
|
--cl-color-error: #ff2929; |
||||||
|
font-family:'iranSans'; |
||||||
|
font-size: 10px; |
||||||
|
background: rgba(245, 245, 245, 0.53); |
||||||
|
border:1px solid #DBDBDB; |
||||||
|
box-shadow: 0 1em em rgba(0, 0, 0, 0.07); |
||||||
|
border-radius: 1em; |
||||||
|
position: relative; |
||||||
|
user-select: none; |
||||||
|
padding-top: 1.2em; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 40em; |
||||||
|
z-index: 10; |
||||||
|
max-width: 90vw; |
||||||
|
min-height: 38.7em; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker .Calendar, |
||||||
|
.DatePicker__calendarArrow { |
||||||
|
transform: translateY(2.5em); |
||||||
|
opacity: 0; |
||||||
|
animation: fadeCalendar 0.3s forwards; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top .Calendar { |
||||||
|
transform: translateY(-2.5em); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-noFocusOutline *:focus { |
||||||
|
outline: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar > :not(.Calendar__footer) button { |
||||||
|
font-family: inherit; |
||||||
|
background: transparent; |
||||||
|
cursor: pointer; |
||||||
|
-webkit-tap-highlight-color: transparent; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__header { |
||||||
|
display: flex; |
||||||
|
color: var(--cl-color-black); |
||||||
|
padding: 2em 2.9em; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper { |
||||||
|
line-height: 0; |
||||||
|
font-size: 1em; |
||||||
|
padding: 3px; |
||||||
|
position: relative; |
||||||
|
border: none; |
||||||
|
z-index: 1; |
||||||
|
opacity: 1; |
||||||
|
transition: 0.2s; |
||||||
|
background-color: #06BACE; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:disabled, |
||||||
|
.Calendar__monthArrowWrapper.-hidden { |
||||||
|
opacity: 0; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper.-left { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-left { |
||||||
|
transform: rotate(-180deg); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper.-right { |
||||||
|
transform: rotate(-0deg); |
||||||
|
|
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-right { |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:active .Calendar__monthArrow { |
||||||
|
transform: scale(0.7); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrow { |
||||||
|
border-radius: 7px; |
||||||
|
padding: 12px; |
||||||
|
transition: var(--animation-duration) transform; |
||||||
|
pointer-events: none; |
||||||
|
background-repeat: no-repeat; |
||||||
|
display: block; |
||||||
|
width: 0.7em; |
||||||
|
height: 0.7em; |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E"); background-size: 100% 100%; |
||||||
|
background-color: #06BACE; |
||||||
|
background-size: 10px; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYearContainer { |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear { |
||||||
|
font-size: 2em; |
||||||
|
font-weight: 500; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 50%; |
||||||
|
will-change: transform, opacity; |
||||||
|
backface-visibility: hidden; |
||||||
|
transform: translateZ(0); |
||||||
|
transition: var(--animation-duration); |
||||||
|
line-height: 1; |
||||||
|
color:#246E8A; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-hiddenNext { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear.-hiddenNext { |
||||||
|
transform: translateX(-150%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-hiddenPrevious { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(-150%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shown { |
||||||
|
opacity: 1; |
||||||
|
margin-top: auto; |
||||||
|
margin-bottom: auto; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shownAnimated { |
||||||
|
animation: var(--animation-duration) fadeTextToCenter forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear > * { |
||||||
|
padding: 0.2em 0.5em; |
||||||
|
border: 1px solid transparent; |
||||||
|
transition: var(--animation-duration); |
||||||
|
font-size: 1.05em; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
transform: translateX(0) scale(0.95); |
||||||
|
will-change: transform; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear:not(.-shown) > *, |
||||||
|
.Calendar__monthYear > *.-hidden { |
||||||
|
cursor: default; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthText { |
||||||
|
margin-left: -0.3em; |
||||||
|
} |
||||||
|
.Calendar__yearText:last-child { |
||||||
|
margin-right: -0.3em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shown > *:hover, |
||||||
|
.Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, |
||||||
|
.Calendar__monthYear > *.-activeBackground { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthText:hover { |
||||||
|
transform: translateX(-0.2em) scale(0.95); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthText:hover { |
||||||
|
transform: translateX(0.2em) scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearText:hover { |
||||||
|
transform: translateX(0.2em) scale(0.95); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__yearText:hover { |
||||||
|
transform: translateX(-0.2em) scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear .Calendar__yearText.-hidden { |
||||||
|
transform: translateX(50%); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear .Calendar__monthText.-hidden { |
||||||
|
transform: translateX(-50%); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear:not(.-shown) > * { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorAnimationWrapper, |
||||||
|
.Calendar__yearSelectorAnimationWrapper { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 80%; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorWrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector { |
||||||
|
padding: 0 2.5em; |
||||||
|
align-content: center; |
||||||
|
padding-bottom: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector, |
||||||
|
.Calendar__yearSelector { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
background-color: #fff; |
||||||
|
transform: translateY(-150%); |
||||||
|
will-change: transform; |
||||||
|
transition: 0.6s; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::after, |
||||||
|
.Calendar__yearSelectorWrapper::before { |
||||||
|
content: ''; |
||||||
|
width: 100%; |
||||||
|
height: 5em; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
opacity: 0; |
||||||
|
transition: 0.4s; |
||||||
|
transition-delay: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::after { |
||||||
|
background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); |
||||||
|
top: -0.1em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::before { |
||||||
|
background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper.-faded::after, |
||||||
|
.Calendar__yearSelectorWrapper.-faded::before { |
||||||
|
opacity: 1; |
||||||
|
z-index: 3; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelector { |
||||||
|
align-content: flex-start; |
||||||
|
scrollbar-width: 0; |
||||||
|
overflow: scroll; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
padding: 5em 2em; |
||||||
|
-ms-overflow-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelector::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorItem { |
||||||
|
width: 25%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { |
||||||
|
margin-top: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorText { |
||||||
|
border: none; |
||||||
|
font-size: 1.4em; |
||||||
|
min-width: 85%; |
||||||
|
padding: 0.2em 0.5em; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector.-open, |
||||||
|
.Calendar__yearSelector.-open { |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorText:focus, |
||||||
|
.Calendar__monthSelectorItemText:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem { |
||||||
|
width: calc(100% / 3); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { |
||||||
|
margin-top: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItemText { |
||||||
|
border: none; |
||||||
|
padding: 0.4em 0.4em; |
||||||
|
border-radius: 8.5px; |
||||||
|
font-size: 1.3em; |
||||||
|
min-width: 70%; |
||||||
|
transition: 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, |
||||||
|
.Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItemText:disabled, |
||||||
|
.Calendar__yearSelectorText:disabled { |
||||||
|
opacity: 0.5; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, |
||||||
|
.Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { |
||||||
|
background-color: #006C94; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekDays { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: var(--cl-color-disabled); |
||||||
|
font-size: 1.2em; |
||||||
|
margin-bottom: 0.7em; |
||||||
|
padding: 0 2.6em; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekDay { |
||||||
|
display: block; |
||||||
|
width: calc(100% / 7); |
||||||
|
|
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
border: 0px; |
||||||
|
color: #06BACE; |
||||||
|
margin:0.2em; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.Calendar__weekDay[title]{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__sectionWrapper { |
||||||
|
position: relative; |
||||||
|
min-height: 25.8em; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding: 0 3.2em; |
||||||
|
position: absolute; |
||||||
|
color: var(--cl-color-black); |
||||||
|
top: 0; |
||||||
|
padding-top: 0.5em; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
will-change: transform, opacity; |
||||||
|
transform: translateZ(0); |
||||||
|
backface-visibility: hidden; |
||||||
|
transition: var(--animation-duration); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-hiddenPrevious { |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(-90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__section.-hiddenPrevious { |
||||||
|
transform: translateX(90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-hiddenNext { |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__section.-hiddenNext { |
||||||
|
transform: translateX(-90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-shown { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-shownAnimated { |
||||||
|
animation: var(--animation-duration) FadeContentToCenter forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekRow { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day { |
||||||
|
width: calc(100% / 7 - 6px); |
||||||
|
text-align: center; |
||||||
|
padding: calc(0.25em - 1px); |
||||||
|
font-size: 1.6em; |
||||||
|
border-radius: 7px; |
||||||
|
transition: 0.2s; |
||||||
|
border: 1px solid transparent; |
||||||
|
margin:3px; |
||||||
|
color: rgba(0, 0, 0, 0.8); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
vertical-align: middle; |
||||||
|
background-color: #F3F3F3; |
||||||
|
color:#06BACE; |
||||||
|
|
||||||
|
} |
||||||
|
.Calendar__day span{ |
||||||
|
padding: -10px; |
||||||
|
margin-top: -30px; |
||||||
|
font-size: 28px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr { |
||||||
|
min-height: 2.6em; |
||||||
|
font-size: 1.45em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl { |
||||||
|
font-size: 1.55em; |
||||||
|
height: 2.45em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { |
||||||
|
|
||||||
|
background-color: #DAFBFF; |
||||||
|
color: #06BACE; |
||||||
|
border:1px solid #06BACE; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-selected, |
||||||
|
.Calendar__day.-selectedStart, |
||||||
|
.Calendar__day.-selectedEnd { |
||||||
|
background: #006C94; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr.-selectedStart { |
||||||
|
border-radius: 0; |
||||||
|
border-top-left-radius: 7px; |
||||||
|
border-bottom-left-radius: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl.-selectedStart { |
||||||
|
border-radius: 0; |
||||||
|
border-top-right-radius: 7px; |
||||||
|
border-bottom-right-radius: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-selectedBetween { |
||||||
|
background:rgba(0, 108, 148, 0.07); |
||||||
|
|
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr.-selectedEnd { |
||||||
|
border-radius: 0; |
||||||
|
border-top-right-radius: 7px; |
||||||
|
border-bottom-right-radius: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl.-selectedEnd { |
||||||
|
border-radius: 0; |
||||||
|
border-top-left-radius: 7px; |
||||||
|
border-bottom-left-radius: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
||||||
|
color: var(--cl-color-error); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
background: var(--cl-color-error); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-disabled { |
||||||
|
color: var(--cl-color-disabled) !important; |
||||||
|
background: transparent !important; |
||||||
|
cursor: default !important; |
||||||
|
} |
||||||
|
.Calendar__day.-selected { |
||||||
|
|
||||||
|
} |
||||||
|
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
||||||
|
font-weight: 600; |
||||||
|
color: var(--cl-color-black); |
||||||
|
color: #000; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
bottom: 0.2em; |
||||||
|
display: block; |
||||||
|
width: 0.6em; |
||||||
|
height: 1px; |
||||||
|
background: #000; |
||||||
|
left: 50%; |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(-50%); |
||||||
|
transition: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-blank { |
||||||
|
color: transparent; |
||||||
|
cursor: default; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__footer { |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.Calendar__footer .footer__Events{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
font-size: 12px; |
||||||
|
font-family: 'IranSans'; |
||||||
|
padding: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar .holiday span{ |
||||||
|
color:#ff2929; |
||||||
|
} |
||||||
|
.Calendar .DayNumDiv{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.Calendar .DayNumDiv span{ |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
margin-bottom: -5px; |
||||||
|
} |
||||||
|
.Calendar .DayNumDiv .eventDots{ |
||||||
|
margin-top: -10px; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.GoToTodayButton{ |
||||||
|
background-color: #006C94; |
||||||
|
padding: 7.5px; |
||||||
|
font-size: 12px; |
||||||
|
color:white; |
||||||
|
font-family: 'iranSans'; |
||||||
|
border-radius: 50%; |
||||||
|
float: left; |
||||||
|
margin: 15px; |
||||||
|
|
||||||
|
} |
||||||
|
@keyframes fadeCalendar { |
||||||
|
from { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeArrowFlipped { |
||||||
|
from { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0) rotate(180deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeTextToCenter { |
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes FadeContentToCenter { |
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import DateRangePicker from "./DateRangePicker"; |
||||||
|
|
||||||
|
function Calender() { |
||||||
|
const list = { |
||||||
|
1: <DateRangePicker />, |
||||||
|
}; |
||||||
|
const [type, setType] = useState(1); |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<select |
||||||
|
className="mb-10 w-20 bg-gray-200" |
||||||
|
onChange={(e) => setType(e.target.value)} |
||||||
|
> |
||||||
|
{Object.keys(list).map((option, index) => ( |
||||||
|
<option key={index}>{option}</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
{list[type]} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Calender; |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
// import { Range } from "rc-slider";
|
||||||
|
|
||||||
|
// function RcRange({}) {
|
||||||
|
// return <Range />;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default RcRange;
|
||||||
|
|
||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Range = () => { |
||||||
|
return ( |
||||||
|
<div className="text-white bg-red-600 p-4 text-3xl text-center">ERROR</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Range; |
||||||
Loading…
Reference in new issue