Date Picker

A component that allows users to select a date from a calendar.

Examples

Size

State

Disabled

State

Error

State

Helper Text

Booking DatePlease select your preferred arrival date.

import { DatePicker } from 'kalki-design'

<DatePicker>Click me</DatePicker>

npx kalki-design add datepicker

import { DatePicker } from 'kalki-design'

export default function Example() {
  return <DatePicker />
}

Name	Type	Default	Description
Name`value`	Type`Date \| null`	Default`—`	DescriptionThe selected date.
Name`onChange`	Type`(date: Date \| null) => void`	Default`—`	DescriptionCallback when date is selected.
Name`placeholder`	Type`string`	Default`'Select date'`	DescriptionPlaceholder for empty state.
Name`label`	Type`string`	Default`—`	DescriptionInput label element.
Name`helperText`	Type`string`	Default`—`	DescriptionInstructive text below the field.
Name`error`	Type`string \| boolean`	Default`—`	DescriptionError message and styling trigger.
Name`disabled`	Type`boolean`	Default`false`	DescriptionWhether the picker is intractable.
Name`size`	Type`'sm' \| 'md' \| 'lg'`	Default`'md'`	DescriptionTrigger dimensions height.