diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx index 5385d784..8c3f6635 100644 --- a/src/short-urls/ShortUrlForm.tsx +++ b/src/short-urls/ShortUrlForm.tsx @@ -3,7 +3,7 @@ import { InputType } from 'reactstrap/types/lib/Input'; import { Button, FormGroup, Input, Row } from 'reactstrap'; import { cond, isEmpty, pipe, replace, trim, T } from 'ramda'; import { parseISO } from 'date-fns'; -import { DateInput, DateInputProps } from '../utils/DateInput'; +import { DateTimeInput, DateTimeInputProps } from '../utils/dates/DateTimeInput'; import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features'; import { SimpleCard } from '../utils/SimpleCard'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils'; @@ -83,8 +83,8 @@ export const ShortUrlForm = ( /> ); - const renderDateInput = (id: DateFields, placeholder: string, props: Partial = {}) => ( - = {}) => ( + { - const { className, isClearable, selected } = props; + const { className, isClearable, selected, dateFormat } = props; const showCalendarIcon = !isClearable || isNil(selected); const ref = useRef<{ input: HTMLInputElement }>(); @@ -23,7 +23,7 @@ export const DateInput = (props: DateInputProps) => { options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly }, ]} - dateFormat="yyyy-MM-dd" + dateFormat={dateFormat ?? 'yyyy-MM-dd'} className={classNames('date-input-container__input form-control', className)} // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop ref={ref} diff --git a/src/utils/dates/DateTimeInput.tsx b/src/utils/dates/DateTimeInput.tsx new file mode 100644 index 00000000..09b96ffb --- /dev/null +++ b/src/utils/dates/DateTimeInput.tsx @@ -0,0 +1,14 @@ +import { ReactDatePickerProps } from 'react-datepicker'; +import { FC } from 'react'; +import { DateInput } from '../DateInput'; + +export type DateTimeInputProps = Omit; + +export const DateTimeInput: FC = (props) => ( + +);