opsrampjoe · opsrampjoe · Feb 20, 2021 · Feb 19, 2021
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "react-date-range",
-  "version": "1.0.0-beta",
-  "description": "A React component for choosing dates and date ranges.",
+  "name": "react-date-time-range-picker",
+  "version": "1.0.18",
+  "description": "A React component for choosing date and time ranges.",
   "main": "dist/index.js",
   "scripts": {
     "dev": "NODE_ENV=development & webpack-dev-server --hot --inline",
@@ -23,24 +23,26 @@
   "contributors": [
     "Burak Can <[email protected]> (https://github.com/burakcan)",
     "Mehmet Kamil Morcay <[email protected]> (https://github.com/mkg0)",
-    "Engin Semih Basmacı <semih.basmaci@gmail.com> (https://github.com/mortargrind)"
+    "Joseph R B Taylor <joseph.taylor@opsramp.com> (https://github.com/opsrampjoe)"
   ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Adphorus/react-date-range"
+    "url": "https://github.com/opsramp/react-date-range"
   },
   "bugs": {
-    "url": "http://github.com/Adphorus/react-date-range/issues"
+    "url": "http://github.com/opsramp/react-date-range/issues"
   },
   "dependencies": {
     "classnames": "^2.2.1",
     "date-fns": "2.0.0-alpha.7",
+    "postcss": "^7.0.27",
+    "postcss-cli": "^7.1.0",
     "prop-types": "^15.5.10",
     "react-list": "^0.8.8"
   },
   "peerDependencies": {
-    "react": "^0.14 || ^15.0.0-rc || >=15.0"
+    "react": "16.13.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.2.4",
@@ -65,14 +67,12 @@
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.1.4",
     "normalize.css": "^7.0.0",
-    "postcss": "^7.0.1",
-    "postcss-cli": "^6.0.0",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.10",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "precss": "^2.0.0",
     "prettier": "^1.9.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-hot-loader": "^3.1.3",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
@@ -116,7 +116,7 @@ class Calendar extends PureComponent {
       setTimeout(() => this.focusToDate(this.state.focusedDate), 1);
     }
   }
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const propMapper = {
       dateRange: 'ranges',
       date: 'date',
@@ -238,7 +238,7 @@ class Calendar extends PureComponent {
     );
   }
   renderDateDisplay() {
-    const { focusedRange, color, ranges, rangeColors } = this.props;
+    const { focusedRange, color, ranges, rangeColors, showTime } = this.props;
     const defaultColor = rangeColors[focusedRange[0]] || color;
     const styles = this.styles;
     return (
@@ -261,6 +261,15 @@ class Calendar extends PureComponent {
                   readOnly
                   value={this.formatDateDisplay(range.startDate, 'Early')}
                 />
+
+                <input
+                  type={showTime ? 'time' : 'hidden'}
+                  value={this.formatTimeDisplay(range.startDate)}
+                  onChange={evt => {
+                    this.updateTime(evt.target.value, range.startDate, range.endDate, 0);
+                  }}
+                  required={showTime ? true : false}
+                />
               </span>
               <span
                 className={classnames(styles.dateDisplayItem, {
@@ -272,6 +281,15 @@ class Calendar extends PureComponent {
                   readOnly
                   value={this.formatDateDisplay(range.endDate, 'Continuous')}
                 />
+
+                <input
+                  type={showTime ? 'time' : 'hidden'}
+                  value={this.formatTimeDisplay(range.endDate)}
+                  onChange={evt => {
+                    this.updateTime(evt.target.value, range.startDate, range.endDate, 1);
+                  }}
+                  required={showTime ? true : false}
+                />
               </span>
             </div>
           );
@@ -345,13 +363,34 @@ class Calendar extends PureComponent {
     if (!date) return defaultText;
     return format(date, this.props.dateDisplayFormat, this.dateOptions);
   }
+  formatTimeDisplay(date) {
+    if (!date) return '00:00';
+    return format(date, 'HH:mm');
+  }
+  updateTime(time, start, end, index) {
+    const { updateRange } = this.props;
+    var values = time.split(':');
+    if (index === 0) {
+      start.setHours(values[0]);
+      start.setMinutes(values[1]);
+    } else {
+      end.setHours(values[0]);
+      end.setMinutes(values[1]);
+    }
+    const newRange = {
+      startDate: start,
+      endDate: end,
+    };
+    this.setState({ drag: { status: false, range: {} } }, () => {
+      updateRange && updateRange(newRange, false);
+    });
+  }
   render() {
     const {
       showDateDisplay,
       onPreviewChange,
       scroll,
       direction,
-      disabledDates,
       maxDate,
       minDate,
       rangeColors,
@@ -410,7 +449,6 @@ class Calendar extends PureComponent {
                       key={key}
                       drag={this.state.drag}
                       dateOptions={this.dateOptions}
-                      disabledDates={disabledDates}
                       month={monthStep}
                       onDragSelectionStart={this.onDragSelectionStart}
                       onDragSelectionEnd={this.onDragSelectionEnd}
@@ -420,7 +458,10 @@ class Calendar extends PureComponent {
                       style={
                         isVertical
                           ? { height: this.estimateMonthSize(index) }
-                          : { height: scrollArea.monthHeight, width: this.estimateMonthSize(index) }
+                          : {
+                              height: scrollArea.monthHeight,
+                              width: this.estimateMonthSize(index),
+                            }
                       }
                       showMonthName
                       showWeekDays={!isVertical}
@@ -447,7 +488,6 @@ class Calendar extends PureComponent {
                   key={i}
                   drag={this.state.drag}
                   dateOptions={this.dateOptions}
-                  disabledDates={disabledDates}
                   month={monthStep}
                   onDragSelectionStart={this.onDragSelectionStart}
                   onDragSelectionEnd={this.onDragSelectionEnd}
@@ -469,7 +509,6 @@ class Calendar extends PureComponent {
 Calendar.defaultProps = {
   showMonthArrow: true,
   showMonthAndYearPickers: true,
-  disabledDates: [],
   classNames: {},
   locale: defaultLocale,
   ranges: [],
@@ -480,21 +519,20 @@ Calendar.defaultProps = {
   showPreview: true,
   displayMode: 'date',
   months: 1,
-  color: '#3d91ff',
+  color: '#424242',
   scroll: {
     enabled: false,
   },
   direction: 'vertical',
   maxDate: addYears(new Date(), 20),
   minDate: addYears(new Date(), -100),
-  rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+  rangeColors: ['#0077C8', '#3ecf8e', '#fed14c'],
   dragSelectionEnabled: true,
 };
 
 Calendar.propTypes = {
   showMonthArrow: PropTypes.bool,
   showMonthAndYearPickers: PropTypes.bool,
-  disabledDates: PropTypes.array,
   minDate: PropTypes.object,
   maxDate: PropTypes.object,
   date: PropTypes.object,

diff --git a/src/components/DateRange.js b/src/components/DateRange.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Calendar from './Calendar.js';
 import { rangeShape } from './DayCell';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
-import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns';
+import { isBefore, differenceInCalendarDays, addDays, min } from 'date-fns';
 import classnames from 'classnames';
 import coreStyles from '../styles';
 
@@ -15,14 +15,17 @@ class DateRange extends Component {
     this.updatePreview = this.updatePreview.bind(this);
     this.calcNewSelection = this.calcNewSelection.bind(this);
     this.state = {
-      focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0],
+      focusedRange: props.initialFocusedRange || [
+        findNextRangeIndex(props.ranges),
+        0,
+      ],
       preview: null,
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
-  calcNewSelection(value, isSingleValue = true) {
+  calcNewSelection(value, isSingleValue = true, focusChange = true) {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
-    const { ranges, onChange, maxDate, moveRangeOnFirstSelection, disabledDates } = this.props;
+    const { ranges, onChange, maxDate, moveRangeOnFirstSelection } = this.props;
     const focusedRangeIndex = focusedRange[0];
     const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange || !onChange) return {};
@@ -33,6 +36,9 @@ class DateRange extends Component {
     if (!isSingleValue) {
       startDate = value.startDate;
       endDate = value.endDate;
+      if (!focusChange) {
+        nextFocusRange = focusedRange;
+      }
     } else if (focusedRange[1] === 0) {
       // startDate selection
       const dayOffset = differenceInCalendarDays(endDate, startDate);
@@ -43,46 +49,34 @@ class DateRange extends Component {
     } else {
       endDate = value;
     }
-
     // reverse dates if startDate before endDate
-    let isStartDateSelected = focusedRange[1] === 0;
     if (isBefore(endDate, startDate)) {
-      isStartDateSelected = !isStartDateSelected;
       [startDate, endDate] = [endDate, startDate];
     }
 
-    const inValidDatesWithinRange = disabledDates.filter(disabledDate =>
-      isWithinInterval(disabledDate, {
-        start: startDate,
-        end: endDate,
-      })
-    );
-
-    if (inValidDatesWithinRange.length > 0) {
-      if (isStartDateSelected) {
-        startDate = addDays(max(inValidDatesWithinRange), 1);
-      } else {
-        endDate = addDays(min(inValidDatesWithinRange), -1);
-      }
-    }
-
     if (!nextFocusRange) {
-      const nextFocusRangeIndex = findNextRangeIndex(this.props.ranges, focusedRange[0]);
+      const nextFocusRangeIndex = findNextRangeIndex(
+        this.props.ranges,
+        focusedRange[0]
+      );
       nextFocusRange = [nextFocusRangeIndex, 0];
     }
     return {
-      wasValid: !(inValidDatesWithinRange.length > 0),
       range: { startDate, endDate },
       nextFocusRange: nextFocusRange,
     };
   }
-  setSelection(value, isSingleValue) {
+  setSelection(value, isSingleValue, focusChange) {
     const { onChange, ranges, onRangeFocusChange } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const focusedRangeIndex = focusedRange[0];
     const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange) return;
-    const newSelection = this.calcNewSelection(value, isSingleValue);
+    const newSelection = this.calcNewSelection(
+      value,
+      isSingleValue,
+      focusChange
+    );
     onChange({
       [selectedRange.key || `range${focusedRangeIndex + 1}`]: {
         ...selectedRange,
@@ -97,7 +91,8 @@ class DateRange extends Component {
   }
   handleRangeFocusChange(focusedRange) {
     this.setState({ focusedRange });
-    this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange);
+    this.props.onRangeFocusChange &&
+      this.props.onRangeFocusChange(focusedRange);
   }
   updatePreview(val) {
     if (!val) {
@@ -106,8 +101,9 @@ class DateRange extends Component {
     }
     const { rangeColors, ranges } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
-    const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
-    this.setState({ preview: { ...val.range, color } });
+    const color =
+      ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
+    this.setState({ preview: { ...val, color } });
   }
   render() {
     return (
@@ -116,13 +112,18 @@ class DateRange extends Component {
         onRangeFocusChange={this.handleRangeFocusChange}
         preview={this.state.preview}
         onPreviewChange={value => {
-          this.updatePreview(value ? this.calcNewSelection(value) : null);
+          this.updatePreview(value ? this.calcNewSelection(value).range : null);
         }}
         {...this.props}
         displayMode="dateRange"
-        className={classnames(this.styles.dateRangeWrapper, this.props.className)}
+        className={classnames(
+          this.styles.dateRangeWrapper,
+          this.props.className
+        )}
         onChange={this.setSelection}
-        updateRange={val => this.setSelection(val, false)}
+        updateRange={(val, focusChange) =>
+          this.setSelection(val, false, focusChange)
+        }
         ref={target => {
           this.calendar = target;
         }}
@@ -135,8 +136,7 @@ DateRange.defaultProps = {
   classNames: {},
   ranges: [],
   moveRangeOnFirstSelection: false,
-  rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
-  disabledDates: [],
+  rangeColors: ['#0077C8', '#3ecf8e', '#fed14c'],
 };
 
 DateRange.propTypes = {

diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js
@@ -14,7 +14,22 @@ class DateRangePicker extends Component {
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
+
   render() {
+    /**
+     * Here I am intercepting the normal unified onChange that gets passed 
+     * in and am attaching a label property (i.e. "Last 4 Hours") if the 
+     * event came from the list of predefined ranges.
+     */
+    const specialHandleChange = (event, label) => {
+      if (typeof label !== 'undefined') {
+        event.selection.label = label;
+      } else {
+        event.selection.label = '';
+      }
+      this.props.onChange(event);
+    };
+
     const { focusedRange } = this.state;
     return (
       <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
@@ -24,11 +39,14 @@ class DateRangePicker extends Component {
           {...this.props}
           range={this.props.ranges[focusedRange[0]]}
           className={undefined}
+          onChange={specialHandleChange}
+          label={this.props.label}
         />
         <DateRange
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
           focusedRange={focusedRange}
           {...this.props}
+          onChange={specialHandleChange}
           ref={t => (this.dateRange = t)}
           className={undefined}
         />