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 label="Date" />

Time​

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

Datetime​

Result
Loading...
Live Editor
<DatePicker label="Datetime" 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" />

Within a Form​

Result
Loading...
Live Editor
<div data-testid="within-form">
	<Form
		initialValues={{}}
		onSubmit={async (values, { setSubmitting }) => {
			console.log(values);
			setSubmitting(false);
		}}
		validationSchema={object().shape({
			datepicker: string().required(),
		})}
	>
		<FormField>
			<DatePicker label="DatePicker" name="datepicker" />
		</FormField>
	</Form>
</div>

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​