feat(core/presentation): Add DayPickerInput form input component

app/scripts/modules/core/src/presentation/forms/inputs/DayPickerInput.less

@@ -0,0 +1,4 @@
+/* Kludge while we figure out how to add the form-control ng-invalid classes directly to the nested day-picker input */
+.DayPickerInput.ng-invalid > input {
+  border-color: var(--color-danger);
+}

app/scripts/modules/core/src/presentation/forms/inputs/DayPickerInput.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { defaults } from 'lodash';
+
+import { DayPickerInputProps } from 'react-day-picker';
+import DayPicker from 'react-day-picker/DayPickerInput';
+
+import { IFormInputProps } from '../interface';
+import { createFakeReactSyntheticEvent, orEmptyString, validationClassName } from './utils';
+
+import 'react-day-picker/lib/style.css';
+import './DayPickerInput.less';
+
+export function DayPickerInput(props: IFormInputProps & DayPickerInputProps) {
+  const { validation, inputClassName, classNames, onChange, onBlur, name, ...rest } = props;
+  const className = `${orEmptyString(inputClassName)} ${validationClassName(validation)}`;
+
+  React.useEffect(() => onBlur(createFakeReactSyntheticEvent({ name, value: props.value })), []);
+
+  const defaultClassNames = { container: '', overlayWrapper: '', overlay: '' };
+  const managedClassNames = defaults({}, classNames, defaultClassNames);
+  managedClassNames.container = `DayPickerInput ${orEmptyString(managedClassNames.container)} ${className}`;
+
+  return (
+    <DayPicker
+      {...rest}
+      classNames={managedClassNames}
+      onDayChange={(date: Date) => {
+        const newValue = date && date.toISOString().slice(0, 10);
+        props.onChange(createFakeReactSyntheticEvent({ name, value: newValue }));
+      }}
+    />
+  );
+}

app/scripts/modules/core/src/presentation/forms/inputs/index.ts

@@ -1,5 +1,6 @@
 export * from './CheckboxInput';
 export * from './ChecklistInput';
+export * from './DayPickerInput';
 export * from './JsonEditor';
 export * from './NumberInput';
 export * from './RadioButtonInput';