vega-frontend-monorepo/libs/deal-ticket/src/components/expiry-selector.tsx
Elmar 6db09974d6
Feat/621 a11y storybook add on (#705)
* chore(ui-toolkit): add aria label to icon for a11y (#621)

* chore(ui-toolkit): add labels for form-groups for a11y (#621)

* fix(ui-toolkit): fix form inputs storybook for a11y (#621)

* feat(ui-toolkit): add strict eslint a11y and components config (#621)

* chore(ui-toolkit): add translate t to form labels
2022-07-07 12:01:03 +01:00

28 lines
847 B
TypeScript

import { FormGroup, Input } from '@vegaprotocol/ui-toolkit';
import { formatForInput } from '@vegaprotocol/react-helpers';
import { t } from '@vegaprotocol/react-helpers';
interface ExpirySelectorProps {
value?: Date;
onSelect: (expiration: Date | null) => void;
}
export const ExpirySelector = ({ value, onSelect }: ExpirySelectorProps) => {
const date = value ? new Date(value) : new Date();
const dateFormatted = formatForInput(date);
const minDate = formatForInput(date);
return (
<FormGroup label={t('Expiry time/date')} labelFor="expiration">
<Input
data-testid="date-picker-field"
id="expiration"
name="expiration"
type="datetime-local"
value={dateFormatted}
onChange={(e) => onSelect(new Date(e.target.value))}
min={minDate}
/>
</FormGroup>
);
};