Forms

Date picker

A text input with a `Calendar` in a popup.

Client componentSource

Import

import { DatePicker } from '@the_viveksingh/vivek-ui'

A text field with a calendar

Typing a date works on its own - the calendar is an aid, not the only way in. That matters because a keyboard user entering a birth date should not have to page through years.

<DatePicker defaultValue={new Date(2026, 7, 21)} aria-label="Start date" onValueChange={setDate} />
<DatePicker size="sm" placeholder="dd/mm/yyyy" aria-label="End date" />

Bounded

min and max are plain Dates and cross a server boundary fine. disabledDates as a predicate does not, so use the array form or mark the surrounding component "use client".

Weekends are unavailable.

<Field label="Delivery date" help="Weekends are unavailable.">
  <DatePicker
    min={new Date(2026, 7, 21)}
    max={new Date(2026, 8, 30)}
    disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
    weekStartsOn={1}
  />
</Field>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for DatePicker
PropTypeDefaultDescription
valueDate | null—Controlled value.
defaultValueDate | null—Uncontrolled initial value.
onValueChange(value: Date | null) => void——
minDate | null——
maxDate | null——
disabledDatesDisabledDates——
weekStartsOnWeekStart——
localeDateLocale——
size'sm' | 'md' | 'lg'——
disabledboolean——
readOnlyboolean——
invalidboolean—Sets `aria-invalid` on the input. Injected by `Field`.
requiredboolean—Injected by `Field`.
namestring—Submits the input's text with the form. With the default format, that is the ISO date.
placeholderstring—Shown when empty. Defaults to the expected text format.
format(date: Date) => string—Renders a value as the input's text. Default `YYYY-MM-DD`.
parse(text: string) => Date | null—Reads the input's text. Default: strict `YYYY-MM-DD` (or `YYYY/M/D`).
openboolean—Controlled popup state.
defaultOpenboolean——
onOpenChange(open: boolean) => void——
sideSide—Preferred side for the popup. Flipped when there is no room. Default `'bottom'`.
alignAlign——
offsetnumber——
paddingnumber——
containerPortalContainer——
openLabelstring—Accessible name for the trigger button. Default `'Choose date'`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering