DateInput

Date and time picker input.

import { DateInput } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<DateInput label="Select Date" />

<DateInput label="Birth Date" defaultValue="1990-01-15" />

Prop	Type	Default	Description
`value`	`string`	—	Controlled date value in ISO format.
`defaultValue`	`string`	—	Initial date value for uncontrolled mode.
`onChange`	`(value: string) => void`	—	Callback when date changes.
`min`	`string`	—	Minimum selectable date in ISO format.
`max`	`string`	—	Maximum selectable date in ISO format.
`label`	`string`	—	Label text displayed above the input.
`placeholder`	`string`	`'Select date'`	Placeholder text.
`disabled`	`boolean`	`false`	Disable the date picker.
`required`	`boolean`	`false`	Mark the field as required.
`includeTime`	`boolean`	`false`	Include time selection (datetime-local input).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset.
`class`	`string`	—	Additional CSS classes.
`style`	`JSX.CSSProperties`	—	Custom styles.
`unstyled`	`boolean`	`false`	Remove all default styling classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.