Datepicker

Single

Single datepicker props

Range

Range datepicker props

Datepicker on Modal

If you need to show the Datepicker in a Modal window, we recommend to set the modal dismissable prop to false to avoid occasional closing.

Example code:

export const DatepickerOnModal = () => {
const [showModal, setShowModal] = useState(false);
const [value, setValue] = React.useState();
return (
<>
{!showModal && <Button onClick={() => setShowModal(true)}>Open Modal with Datepicker</Button>}
{showModal && (
<Modal dismissible={false} onClose={() => setShowModal(false)}>
{dismiss => (
<>
<Headline as="h2">New Event</Headline>
<DatePicker value={value} onChange={setValue} />
<br />
<Button onClick={dismiss}>Add Event</Button>
<TextButton onClick={dismiss}>Cancel</TextButton>
</>
)}
</Modal>
)}
</>
);
};

Playground