feat #314 - Initial implementation

src/components/DateRangeInput/DateRangeInput.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { DateRangeInput, DateRangeInputProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	component: DateRangeInput,
+	title: 'DateRangeInput'
+} as Meta
+
+const Template: Story<DateRangeInputProps> = args => (
+	<DateRangeInput {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {}

src/components/DateRangeInput/index.tsx

@@ -0,0 +1,78 @@
+import cn from 'classnames'
+import { DatePicker } from 'antd'
+import { MomentInputObject } from 'moment'
+import { formatTime, parseTime } from '../TimeInput/utils'
+import React, { FC } from 'react'
+
+const { RangePicker: AntDRangePicker } = DatePicker
+
+export interface DateRangeInputValue {
+	end: number
+	start: number
+}
+
+interface TimeProps {
+	displayFormat?: string
+}
+
+export interface DateRangeInputProps {
+	classes?: string[]
+	displayFormat?: string
+	onChange?: (value: DateRangeInputValue) => void
+	/**
+	 * Whether to include time or not. Can either be boolean or an object
+	 */
+	includeTime?: boolean | TimeProps
+	value?: DateRangeInputValue
+}
+
+export const DateRangeInput: FC<DateRangeInputProps> = ({
+	classes = [],
+	displayFormat = 'YYYY-MM-DD hh:mm A',
+	onChange,
+	includeTime = { displayFormat: 'hh:mm A' },
+	value
+}: DateRangeInputProps) => {
+	if (value && !onChange) {
+		throw new Error('Controlled inputs require an onChange prop')
+	}
+
+	let controlledCmpProps = {}
+
+	if (onChange) {
+		controlledCmpProps = {
+			onChange: (
+				momentObjArr: [MomentInputObject, MomentInputObject]
+			) => {
+				onChange({
+					end: parseTime(momentObjArr[1], 'unix'),
+					start: parseTime(momentObjArr[0], 'unix')
+				})
+			}
+		}
+
+		if (value) {
+			controlledCmpProps = {
+				...controlledCmpProps,
+				value: [
+					formatTime('unix', value.start),
+					formatTime('unix', value.end)
+				]
+			}
+		}
+	}
+
+	return (
+		<AntDRangePicker
+			allowClear={false}
+			className={cn(classes)}
+			format={displayFormat}
+			showTime={
+				typeof includeTime === 'boolean'
+					? includeTime
+					: { format: includeTime.displayFormat }
+			}
+			{...controlledCmpProps}
+		/>
+	)
+}

src/components/TimeInput/index.tsx

@@ -27,15 +27,14 @@ export interface TimeInputProps
 	onChange?: (value: number) => void
 	onFocus?: (event: FocusEvent<HTMLInputElement>) => void
 	/**
-	 * format of time input value. Either a unix timestamp in seconds or hour integer (0 - 24)
+	 * format of time input value. Either a unix timestamp in milliseconds or hour integer (0 - 24)
 	 * @default 'unix'
 	 */
 	format?: TimeFormat
 	/**
 	 * Interval between minutes in dropdown
 	 * @default 1
 	 * */
-
 	minuteStep?: number
 	/**
 	 * Selector of HTML element inside which to render the dropdown

src/components/TimeInput/utils.ts

@@ -29,7 +29,7 @@ export const formatTime: FormatTime = (format, value) => {
 	if (isUndefined(value)) return value
 
 	if (format === 'unix') {
-		return moment.unix(value)
+		return moment(value)
 	}
 
 	return moment(value, hourIntegerFormat)
@@ -46,7 +46,7 @@ export const parseTime: ParseTime = (
 	format: TimeFormat
 ) =>
 	format === 'unix'
-		? moment(momentObj).unix()
+		? moment(momentObj).valueOf()
 		: parseInt(moment(momentObj).format(hourIntegerFormat))
 
 // -x-x-x-x-x-x-x-x- Styles Related -x-x-x-x-x-x-x-x-