Datepicker

Single

Single datepicker props

NameTypeDefault
placeholder

string

Placeholder for the input.
label

string

Label for the input.
onClose

Function => void

Function that is used when datepicker closes without selected date.
onChange

Function => void

Function that is used when datepicker selects new date.
minDate

Date

Minimal date to select from.
maxDate

Date

Maximum date to select from.
firstDayOfWeek

FirstDayOfWeek (number from 0-6)

Accepts a number for first day of the week from 0 (Sunday) to 6 (Saturday).
1
isDateBlocked

Function => boolean

Function that runs for each date and returns boolean whether date is disabled or not.
() => false
displayFormat

string

String to format dates.
dd/MM/yyyy
locale

string

String to define the locale in ISO-639-1.
en-US
value

Date

Set the value of the input.
errorHandler

(Function => void) | string

Text to be shown if error filling the input or fn to be trigger as a callback when error.
inputId

string

The id to be assigned to the input field.
disabled

boolean

Determines whether the datePicker is disabled or not.

The DatePicker supports margin and width styled-system props.

Range

Range datepicker props

NameTypeDefault
startPlaceholder

string

Placeholder for start date.
endPlaceholder

string

Placeholder for end date.
label

string

Label for the input.
onClose

Function => void

Function that is used when datepicker closes without selected date.
value

DateRange (interface containing startDate and endDate properties)

Set the value for the date.
onChange

Function (change: DateRange) => void

Function that is used when datepicker selects new date.
minDate

Date

Minimal date to select from.
maxDate

Date

Maximum date to select from.
firstDayOfWeek

FirstDayOfWeek (number from 0-6)

Accepts a number for first day of the week from 0 (Sunday) to 6 (Saturday).
1
isDateBlocked

Function => boolean

Function that runs for each date and returns boolean whether date is disabled or not.
() => false
placement

'left' | 'right' | 'center'

Used to align the datepicker in relation to input.
left
displayFormat

string

String to format dates.
dd/MM/yyyy
locale

string

String to define the locale in ISO-639-1.
en-US
errorHandler

(Function => void) | string

Text to be shown if error filling the input or fn to be trigger as a callback when error.
startInputId

string

The id to be assigned to the start date input.
endInputId

string

The id to be assigned to the end date input.
variant

'compact' | 'normal'

Determines the variant, 'compact' displays only a single month
'normal'
disabled

boolean

Determines whether the datePicker is disabled or not.

The DateRangePicker supports margin and width styled-system 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