Skip to main content

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 />

Time​

Result
Loading...
Live Editor
<DatePicker type="time" />

Datetime​

Result
Loading...
Live Editor
<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" />

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​