#1694-absence-multiple-range-datepicker

README.md

@@ -39,11 +39,12 @@ Example with property Range enabled
 | `untilDate` | `Moment`        |  set a date to where the user can select to                |
 | `months`         | `number`        | the number of months you want to show default: 1                                                      |
 | `onChange`        | `function`           | pass a custom function to handle the changes detected in the calendar : (fromDate, untilDate) => console.log(fromDate, untilDate)                                                     |
+| `displayRanges`        | `array`           | pass an array of arrays. Each of those arrays are a range, consisting of a from date and until date. These only display
 
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
 Please make sure to update tests as appropriate.
 
 ## License
-[GPL-3.0-or-later](https://choosealicense.com/licenses/gpl-3.0/)
+[GPL-3.0-or-later](https://choosealicense.com/licenses/gpl-3.0/)

src/DateTimeRangePicker/DatePicker/DatePicker.scss

@@ -2,6 +2,7 @@ $color-highlight: #428be3;
 $color-background-day: rgba(black, .1);
 $color-other-month: rgba(black, .4);
 $color-disabled: rgba(black, .4);
+$color-already-selected: rgba(red, .4);
 
 .date-time-range-picker .date-time-range-picker-dates{
   position: relative;
@@ -93,6 +94,31 @@ $color-disabled: rgba(black, .4);
             color: white;
           }
 
+          &.already-selected {
+            background-color: $color-already-selected;
+            margin: .3em 0;
+            padding: 0 .3em;
+            border-radius: 0;
+
+            &.active-from-date:not(.active-from-date-reverse) {
+              border-top-left-radius: 1.5em;
+              border-bottom-left-radius: 1.5em;
+              margin-left: .3em;
+              padding-left: 0;
+            }
+
+            &.active-until-date {
+              border-top-right-radius: 1.5em;
+              border-bottom-right-radius: 1.5em;
+              margin-right: .3em;
+              padding-right: 0;
+            }
+
+            &.active {
+              background-color: $color-already-selected;
+            }
+          }
+
           &.in-range {
             background-color: rgba($color-highlight, .5);
             margin: .3em 0;

src/DateTimeRangePicker/DatePicker/DatePicker.tsx

@@ -9,11 +9,13 @@ import Header from './Header/Header'
 const DatePicker: React.FunctionComponent<IProps> = (
     {
         range = false,
+        displayRanges,
         fromDate,
         untilDate,
         months = 1,
         onFromDateChanged,
-        onUntilDateChanged
+        onUntilDateChanged,
+        isDisabled = false
     }
 ) => {
     const [currentDate, setCurrentDate] = React.useState<Moment>(fromDate ? fromDate.clone() : moment())
@@ -46,11 +48,14 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                hoverDate={hoverDate}
                                onDaySelected={
                                    (selectedDate: Moment) => {
-                                       if (!fromDate || (fromDate && untilDate)) {
-                                           onFromDateChanged(selectedDate.clone())
-                                           onUntilDateChanged(range ? undefined : selectedDate.clone())
+                                       if (isDisabled) {
                                            return
                                        }
+                                           if (!fromDate || (fromDate && untilDate)) {
+                                               onFromDateChanged(selectedDate.clone())
+                                               onUntilDateChanged(range ? undefined : selectedDate.clone())
+                                               return
+                                           }
 
                                        if (selectedDate.isBefore(fromDate)) {
                                            onFromDateChanged(selectedDate.clone())
@@ -64,9 +69,13 @@ const DatePicker: React.FunctionComponent<IProps> = (
                                }
                                onDayHover={
                                    (onHoverDate: Moment | undefined) => {
+                                       if (isDisabled) {
+                                           return
+                                       }
                                        setHoverDate(onHoverDate)
                                    }
                                }
+                               displayRanges={displayRanges}
                         />
                     )
                 }

src/DateTimeRangePicker/DatePicker/IProps.ts

@@ -6,7 +6,9 @@ interface IProps {
     untilDate?: moment.Moment,
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
-    onUntilDateChanged: (date: Moment | undefined) => void
+    onUntilDateChanged: (date: Moment | undefined) => void,
+    displayRanges: [],
+    isDisabled?: boolean
 }
 
 export default IProps

src/DateTimeRangePicker/DatePicker/Month/IProps.ts

@@ -10,6 +10,7 @@ interface IProps {
     showDaysNextMonth: boolean,
     onDaySelected: (date: Moment) => void,
     onDayHover: (date?: Moment | undefined) => void
+    displayRanges: []
 }
 
 export default IProps

src/DateTimeRangePicker/DatePicker/Month/Month.tsx

@@ -5,12 +5,13 @@ import IProps from './IProps'
 
 const Month: React.FunctionComponent<IProps> = (
     {
+        displayRanges,
         month,
         year,
         fromDate,
         untilDate,
         hoverDate,
-        showDaysPreviousMonth ,
+        showDaysPreviousMonth,
         showDaysNextMonth,
         onDaySelected,
         onDayHover
@@ -29,12 +30,29 @@ const Month: React.FunctionComponent<IProps> = (
 
         return dates.map((buttonDate: Moment) => {
             const classNames = []
-            if (! buttonDate.isSame(date, 'month')) {
-                if (buttonDate.isBefore(date) && ! showDaysPreviousMonth) {
+
+            if (displayRanges.length > 0) {
+                displayRanges.forEach((displayRange: Moment[]) => {
+                    displayRange.forEach((displayRangeDate: Moment) => {
+                        if (displayRangeDate.isSame(buttonDate, 'day')) {
+                            classNames.push('already-selected')
+                            if (displayRange[0].isSame(displayRangeDate)) {
+                                classNames.push('active-from-date')
+
+                            } else if (displayRange[displayRange.length - 1].isSame(displayRangeDate)) {
+                                classNames.push('active-until-date')
+                            }
+                        }
+                    })
+                })
+            }
+
+            if (!buttonDate.isSame(date, 'month')) {
+                if (buttonDate.isBefore(date) && !showDaysPreviousMonth) {
                     return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                 }
 
-                if (buttonDate.isAfter(date) && ! showDaysNextMonth) {
+                if (buttonDate.isAfter(date) && !showDaysNextMonth) {
                     return <span className={'dummy-day'} key={`day${buttonDate.format('YYYYMMDD')}`}/>
                 }
 
@@ -61,7 +79,7 @@ const Month: React.FunctionComponent<IProps> = (
 
             if (
                 fromDate
-                && ! untilDate
+                && !untilDate
                 && hoverDate
                 && (
                     buttonDate.isBetween(fromDate, hoverDate, 'day', '[]')
@@ -71,7 +89,7 @@ const Month: React.FunctionComponent<IProps> = (
                 classNames.push('hover-range')
             }
 
-            if (hoverDate  && buttonDate.isSame(hoverDate, 'day')) {
+            if (hoverDate && buttonDate.isSame(hoverDate, 'day')) {
                 classNames.push('hover')
 
                 if (fromDate && !untilDate) {

src/DateTimeRangePicker/DatePicker/Month/__tests__/Month.test.tsx

@@ -14,6 +14,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -31,6 +32,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={onDaySelectedMock}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -50,6 +52,7 @@ describe('Date/time range picker month', () => {
                 showDaysNextMonth={true}
                 onDaySelected={() => undefined}
                 onDayHover={onHoverMock}
+                displayRanges={[]}
             />
         )
 
@@ -69,6 +72,7 @@ describe('Date/time range picker month', () => {
                 hoverDate={moment('2020-05-10')}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 
@@ -86,6 +90,7 @@ describe('Date/time range picker month', () => {
                 untilDate={moment('2020-05-15')}
                 onDaySelected={() => undefined}
                 onDayHover={() => undefined}
+                displayRanges={[]}
             />
         )
 

src/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import moment, {Moment} from 'moment'
+import {Moment} from 'moment'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
@@ -11,12 +11,14 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     {
         date = true,
         range = false,
+        displayRanges = [],
         time = false,
         inline = true,
         fromDate,
         untilDate,
         months = 1,
-        onChange
+        onChange,
+        isDisabled = false
     }
 ) => {
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
@@ -31,23 +33,23 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
 
     useEffect(
         () => {
-            if (! isMounted) {
+            if (!isMounted) {
                 setIsMounted(true)
 
                 return
             }
 
-            if (! onChange) {
+            if (!onChange) {
                 return
             }
 
             const newFromDate = Utils.getDateTime(date, time, currentFromDate, currentFromTime)
-            if (! newFromDate) {
+            if (!newFromDate) {
                 return
             }
 
             const newUntilDate = Utils.getDateTime(date, time, currentUntilDate, currentUntilTime)
-            if (! newUntilDate) {
+            if (!newUntilDate) {
                 onChange(newFromDate, newFromDate)
                 return
             }
@@ -60,6 +62,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         {date
             ? <DatePicker
                 range={range}
+                displayRanges={displayRanges}
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
@@ -73,6 +76,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                         setCurrentUntilDate(changedDate)
                     }
                 }
+                isDisabled={isDisabled}
             />
             : null
         }
@@ -88,11 +92,12 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                             onTimeChanged={
                                 (changedTime: Moment) => {
                                     setCurrentFromTime(changedTime)
-                                    if (! range) {
+                                    if (!range) {
                                         setCurrentUntilTime(changedTime)
                                     }
                                 }
                             }
+                            isDisabled={isDisabled}
                         />
                     </div>
                     {
@@ -107,6 +112,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                                             setCurrentUntilTime(changedTime)
                                         }
                                     }
+                                    isDisabled={isDisabled}
                                 />
                             </div>
                             : null

src/DateTimeRangePicker/IProps.ts

@@ -9,6 +9,8 @@ interface IProps {
     untilDate?: Moment,
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
+    displayRanges?: [],
+    isDisabled?: boolean
 }
 
 export default IProps

src/DateTimeRangePicker/TimePicker/IProps.ts

@@ -3,7 +3,8 @@ import {Moment} from 'moment'
 interface IProps {
     time?: Moment,
     step: number,
-    onTimeChanged: (time: Moment) => void
+    onTimeChanged: (time: Moment) => void,
+    isDisabled?: boolean
 }
 
 export default IProps