forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-11 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created component for DateTimeInputs

Browse Source
This commit is contained in:
Alejandro Celaya
2022-10-18 22:02:09 +02:00
parent 894934fd08
commit 57a17d7e92
3 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/short-urls/ShortUrlForm.tsx
View File

@@ -3,7 +3,7 @@ import { InputType } from 'reactstrap/types/lib/Input';
import { Button, FormGroup, Input, Row } from 'reactstrap'; import { Button, FormGroup, Input, Row } from 'reactstrap';
import { cond, isEmpty, pipe, replace, trim, T } from 'ramda'; import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
import { parseISO } from 'date-fns'; 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 { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils';
@@ -83,8 +83,8 @@ export const ShortUrlForm = (
/> />
</FormGroup> </FormGroup>
); );
const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => ( const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
<DateInput <DateTimeInput
selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null} selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
placeholderText={placeholder} placeholderText={placeholder}
isClearable isClearable

4
src/utils/DateInput.tsx
View File

@@ -9,7 +9,7 @@ import './DateInput.scss';
export type DateInputProps = ReactDatePickerProps; export type DateInputProps = ReactDatePickerProps;
export const DateInput = (props: DateInputProps) => { export const DateInput = (props: DateInputProps) => {
const { className, isClearable, selected } = props; const { className, isClearable, selected, dateFormat } = props;
const showCalendarIcon = !isClearable || isNil(selected); const showCalendarIcon = !isClearable || isNil(selected);
const ref = useRef<{ input: HTMLInputElement }>(); 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 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)} className={classNames('date-input-container__input form-control', className)}
// @ts-expect-error The DatePicker type definition is wrong. It has a ref prop // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
ref={ref} ref={ref}

14
src/utils/dates/DateTimeInput.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { ReactDatePickerProps } from 'react-datepicker';
import { FC } from 'react';
import { DateInput } from '../DateInput';
export type DateTimeInputProps = Omit<ReactDatePickerProps, 'showTimeSelect' | 'dateFormat' | 'timeIntervals'>;
export const DateTimeInput: FC<DateTimeInputProps> = (props) => (
<DateInput
{...props}
dateFormat="yyyy-MM-dd HH:mm"
showTimeSelect
timeIntervals={5}
/>
);