Date picker (#3572)

* Add date picker dependency
* Add DateInput component
* Add DateInput to edit panels
* Add DateInput to DateFilter
* Add time to DateInput and add to Timestamp filter
* Use calendar icon for button

ui/v2.5/src/components/Shared/DateInput.tsx

@@ -0,0 +1,105 @@
+import { faCalendar } from "@fortawesome/free-regular-svg-icons";
+import React, { useMemo } from "react";
+import { Button, InputGroup, Form } from "react-bootstrap";
+import ReactDatePicker from "react-datepicker";
+import TextUtils from "src/utils/text";
+import { Icon } from "./Icon";
+
+import "react-datepicker/dist/react-datepicker.css";
+import { useIntl } from "react-intl";
+
+interface IProps {
+  disabled?: boolean;
+  value: string | undefined;
+  isTime?: boolean;
+  onValueChange(value: string): void;
+  placeholder?: string;
+  error?: string;
+}
+
+export const DateInput: React.FC<IProps> = (props: IProps) => {
+  const intl = useIntl();
+
+  const date = useMemo(() => {
+    const toDate = props.isTime
+      ? TextUtils.stringToFuzzyDateTime
+      : TextUtils.stringToFuzzyDate;
+    if (props.value) {
+      const ret = toDate(props.value);
+      if (!ret || isNaN(ret.getTime())) {
+        return undefined;
+      }
+
+      return ret;
+    }
+  }, [props.value, props.isTime]);
+
+  function maybeRenderButton() {
+    if (!props.disabled) {
+      const ShowPickerButton = ({
+        onClick,
+      }: {
+        onClick: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => void;
+      }) => (
+        <Button variant="secondary" onClick={onClick}>
+          <Icon icon={faCalendar} />
+        </Button>
+      );
+
+      const dateToString = props.isTime
+        ? TextUtils.dateTimeToString
+        : TextUtils.dateToString;
+
+      return (
+        <ReactDatePicker
+          selected={date}
+          onChange={(v) => {
+            props.onValueChange(v ? dateToString(v) : "");
+          }}
+          customInput={React.createElement(ShowPickerButton)}
+          showMonthDropdown
+          showYearDropdown
+          scrollableMonthYearDropdown
+          scrollableYearDropdown
+          maxDate={new Date()}
+          yearDropdownItemNumber={100}
+          portalId="date-picker-portal"
+          showTimeSelect={props.isTime}
+        />
+      );
+    }
+  }
+
+  const placeholderText = intl.formatMessage({
+    id: props.isTime ? "datetime_format" : "date_format",
+  });
+
+  return (
+    <div>
+      <InputGroup hasValidation>
+        <Form.Control
+          className="date-input text-input"
+          disabled={props.disabled}
+          value={props.value}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            props.onValueChange(e.currentTarget.value)
+          }
+          placeholder={
+            !props.disabled
+              ? props.placeholder
+                ? `${props.placeholder} (${placeholderText})`
+                : placeholderText
+              : undefined
+          }
+          isInvalid={!!props.error}
+        />
+        <InputGroup.Append>{maybeRenderButton()}</InputGroup.Append>
+        <Form.Control.Feedback type="invalid">
+          {props.error}
+        </Form.Control.Feedback>
+      </InputGroup>
+    </div>
+  );
+};

ui/v2.5/src/components/Shared/styles.scss

@@ -323,3 +323,97 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active {
   }
   /* stylelint-enable */
 }
+
+.date-input.form-control:focus {
+  // z-index gets set to 3 in input groups
+  z-index: inherit;
+}
+
+/* stylelint-disable */
+div.react-datepicker {
+  background-color: $body-bg;
+  border-color: $card-bg;
+  color: $text-color;
+
+  .react-datepicker__header,
+  .react-datepicker-time__header {
+    background-color: $secondary;
+    color: $text-color;
+  }
+
+  .react-datepicker__day {
+    color: $text-color;
+    &.react-datepicker__day--disabled {
+      color: $text-muted;
+    }
+
+    &:hover {
+      background: rgba(138, 155, 168, 0.15);
+    }
+  }
+
+  div.react-datepicker__time-container div.react-datepicker__time {
+    background-color: $body-bg;
+    color: $text-color;
+
+    ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+      background-color: rgba(138, 155, 168, 0.15);
+    }
+  }
+
+  .react-datepicker__day-name {
+    color: $text-color;
+  }
+
+  // replace the current month with the dropdowns
+  .react-datepicker__current-month {
+    display: none;
+  }
+
+  .react-datepicker__triangle {
+    display: none;
+  }
+
+  .react-datepicker__month-dropdown-container {
+    margin-left: 0;
+    margin-right: 0.25rem;
+  }
+
+  .react-datepicker__year-dropdown-container {
+    margin-left: 0.25rem;
+    margin-right: 0;
+  }
+
+  .react-datepicker__month-dropdown-container
+    .react-datepicker__month-read-view,
+  .react-datepicker__year-dropdown-container .react-datepicker__year-read-view {
+    font-weight: bold;
+    font-size: 0.944rem;
+
+    // react-datepicker hides these fields when the dropdown is shown
+    visibility: visible !important;
+  }
+
+  // hide the dropdown arrows
+  .react-datepicker__month-dropdown-container
+    .react-datepicker__month-read-view--down-arrow,
+  .react-datepicker__year-dropdown-container
+    .react-datepicker__year-read-view--down-arrow {
+    display: none;
+  }
+
+  .react-datepicker__year-dropdown,
+  .react-datepicker__month-dropdown {
+    background-color: $body-bg;
+
+    .react-datepicker__year-option:hover,
+    .react-datepicker__month-option:hover {
+      background-color: #8a9ba826;
+    }
+  }
+}
+/* stylelint-enable */
+
+#date-picker-portal .react-datepicker-popper {
+  z-index: 1600;
+}