feat (FieldDateTime): add minTime and maxTime options (#292)

* feat (FieldDateTime): plumb through minTime and maxTime * pr feedback * lint Co-authored-by: Nathan Young <[email protected]>
istreamlabs · Jan 29, 2020 · 59afd74 · 59afd74
1 parent 32fcea9
commit 59afd74
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 4 deletions.
diff --git a/src/Components/FieldDateTime/FieldDateTime.js b/src/Components/FieldDateTime/FieldDateTime.js
@@ -81,6 +81,16 @@ const propTypes = {
    * <FieldDateTime minDate={subDays(new Date(), 5)} ... />
    */
   minDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /**
+   * Latest time allowed to be selected.
+   * If a `maxTime` is passed without a `minTime`, the `minTime` will be start of day
+   */
+  maxTime: PropTypes.object,
+  /**
+   * Earliest time allowed to be selected.
+   * If a `minTime` is passed without a `maxTime`, the `maxTime` will be end of day.
+   */
+  minTime: PropTypes.object,
   /**
    * Callback function when input is changed
    * @param {string} value a UTC ISO 8601 string (https://en.wikipedia.org/wiki/ISO_8601) of the selected date
@@ -321,7 +331,9 @@ class FieldDateTime extends React.PureComponent {
       isClearable,
       isInvalid,
       maxDate,
+      maxTime,
       minDate,
+      minTime,
       placeholderText,
       popperPlacement,
       selectLocalDateTime,
@@ -340,6 +352,22 @@ class FieldDateTime extends React.PureComponent {
     const momentMinDate = minDate ? moment(minDate) : undefined;
     const momentMaxDate = maxDate ? moment(maxDate) : undefined;
 
+    const momentMinTime =
+      minTime ||
+      (maxTime
+        ? moment()
+            .hours(0)
+            .minutes(0)
+        : null);
+
+    const momentMaxTime =
+      maxTime ||
+      (minTime
+        ? moment()
+            .hours(23)
+            .minutes(59)
+        : null);
+
     const classes = classNames('field-text', className);
 
     const inputClasses = classNames('FieldDateTime-input', {
@@ -392,6 +420,8 @@ class FieldDateTime extends React.PureComponent {
             isClearable={isClearable}
             minDate={momentMinDate}
             maxDate={momentMaxDate}
+            minTime={momentMinTime}
+            maxTime={momentMaxTime}
             onChange={this.onChange}
             popperPlacement={popperPlacement}
             selected={momentValue}

diff --git a/src/Components/FieldDateTime/Readme.md b/src/Components/FieldDateTime/Readme.md
@@ -104,8 +104,9 @@ To show the clear button and show a no value message set `isClearable` and `plac
 import { useState } from 'react';
 
 function FieldDateTimeClear() {
-  const [selectedDate, setSelectedDate] = useState('2019-06-26T12:00:00.000Z');
-
+  const [selectedDate, setSelectedDate] = useState(
+    '2019-06-26T12:00:00.000Z',
+  );
 
   return (
     <FieldDateTime
@@ -120,10 +121,10 @@ function FieldDateTimeClear() {
   );
 }
 
-<FieldDateTimeClear />
+<FieldDateTimeClear />;
 ```
 
-### Min/Max Dates
+### Min/Max Selectable Dates
 
 Depending on the use case, there are a few ways to exclude dates and times from being selectable.
 
@@ -164,6 +165,85 @@ function FieldDateTimeExample() {
 <FieldDateTimeExample />;
 ```
 
+### Min/Max Selectable Time
+
+Set a minimum and maximum selectable time. If a `minTime` is passed without a `maxTime`, the `maxTime` will be end of day. If a `maxTime` is passed without a `minTime`, the `minTime` will be start of day.
+
+```jsx
+import { useState } from 'react';
+import moment from 'moment';
+
+function FieldDateTimeTimeRange() {
+  const [startDate, setStartDate] = useState(
+    moment()
+      .utc()
+      .hours(17)
+      .minutes(30),
+  );
+
+  const [minTimeExample, setMinTimeExample] = useState(
+    moment()
+      .utc()
+      .hours(9)
+      .minutes(30),
+  );
+
+  const [maxTimeExample, setMaxTimeExample] = useState(
+    moment()
+      .utc()
+      .hours(11)
+      .minutes(30),
+  );
+
+  return (
+    <>
+      <FieldDateTime
+        id="minTime"
+        label="17:00 - 19:30"
+        value={startDate}
+        onChange={setStartDate}
+        showTimeSelect
+        minTime={moment()
+          .utc()
+          .hours(17)
+          .minutes(0)}
+        maxTime={moment()
+          .utc()
+          .hours(19)
+          .minutes(30)}
+        className="mb-5"
+      />
+
+      <FieldDateTime
+        id="afterMinTime"
+        label="After 8:00"
+        value={minTimeExample}
+        onChange={setMinTimeExample}
+        showTimeSelect
+        minTime={moment()
+          .utc()
+          .hours(8)
+          .minutes(0)}
+        className="mb-5"
+      />
+      <FieldDateTime
+        id="beforeMaxTime"
+        label="Before 12:00"
+        value={maxTimeExample}
+        onChange={setMaxTimeExample}
+        showTimeSelect
+        maxTime={moment()
+          .utc()
+          .hours(12)
+          .minutes(0)}
+      />
+    </>
+  );
+}
+
+<FieldDateTimeTimeRange />;
+```
+
 ### Calendar Popup Placement
 
 Use `popperPlacement` to control the preferred calendar popup placement is relative to the input field. If there is a no room in the viewport to fit the calendar due to the field's location on the page, the calendar will pop up on the opposite side.