DatePicker

DatePicker uses native input of type date, time, or datetime-local. It's important to be aware that browsers do not call change events on masked inputs until the user has finished selecting a date. This means that the onChange event will not be called until the user has selected a valid date or manually entered a valid date.

Date

Result

Loading...

Live Editor

<DatePicker />

<DatePicker />

Time

Result

Loading...

Live Editor

<DatePicker type="time" />

<DatePicker type="time" />

Datetime

Result

Loading...

Live Editor

<DatePicker type="datetime-local" />

<DatePicker type="datetime-local" />

Min and max values

Ranges of acceptable dates can be provided through the min and max props.

Result

Loading...

Live Editor

<DatePicker label="Date range" min="2023-08-09" max="2023-08-23" />

<DatePicker label="Date range" min="2023-08-09" max="2023-08-23" />

Analytics

The DatePicker component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'DatePicker',
	actions: {
		onChange: { type: 'DATEPICKER_CHANGE', payload: 'Change' },
	},
};

Props