Merge pull request #308 from performant-software/feature/datetime-input

Archnet #1276 - Add DatetimeLocalInput

packages/semantic-ui/src/components/DatetimeLocalInput.css

@@ -0,0 +1,9 @@
+.datetime-local-input.ui.icon.input > i.icon.right {
+  cursor: pointer;
+  pointer-events: all !important;
+  left: auto;
+  right: 1px;
+}
+.datetime-local-input.ui.icon.input > input {
+  padding-right: calc(22px + 1.1em) !important;
+}

packages/semantic-ui/src/components/DatetimeLocalInput.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react';
+import { Icon, Input } from 'semantic-ui-react';
+import './DatetimeLocalInput.css';
+
+type Props = {
+  /**
+   * Callback fired when the datetime string in the input field is changed.
+   */
+  onChange: (dateString: ?String) => void,
+  /**
+   * Current value of the datetime-local input form field, as a string, or null.
+   */
+  value?: ?String
+}
+
+/**
+ * This input component is used to input and display a date and time, using the browser's
+ * native date picker.
+ */
+const DatetimeLocalInput = (props: Props) => (
+  <Input
+    aria-label='Datetime Local Input'
+    className='datetime-local-input icon'
+  >
+    <input
+      onChange={(e) => props.onChange(e.target.value)}
+      type='datetime-local'
+      value={props.value}
+    />
+    <Icon
+      className='right icon'
+      name='times'
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        props.onChange('');
+      }}
+    />
+  </Input>
+);
+
+export default DatetimeLocalInput;

packages/semantic-ui/src/index.js

@@ -27,6 +27,7 @@ export { default as DataView } from './components/DataView';
 export { default as DatabaseView } from './components/DatabaseView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
+export { default as DatetimeLocalInput } from './components/DatetimeLocalInput';
 export { default as DescriptorField } from './components/DescriptorField';
 export { default as DownloadButton } from './components/DownloadButton';
 export { default as Draggable } from './components/Draggable';