apx-dsv0.1Local renderer · live
K
Foundations4
  • Getting started
  • Theming
  • Templates
  • Icons
  • Avatar
  • Badge
  • DataGrid
  • Scheduler
  • Stat
  • Table
  • Timeline
  • TreeView
  • Accordion
  • Alert
  • EmptyState
  • Progress
  • Skeleton
  • Spinner
  • SplashScreen
  • Toast
  • ColorPicker
  • FileUpload
  • Form
  • Rating
  • TagsInput
  • Combobox
  • Field
  • Select
  • Toggle
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Input
  • NumberInput
  • Radio
  • Slider
  • Switch
  • Textarea
  • AppShell
  • Div
  • Divider
  • Sidebar
  • Stack
  • Typography
  • Image
  • Breadcrumbs
  • Carousel
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Toolbar
  • CommandPalette
  • Confirm
  • Drawer
  • HoverCard
  • Menu
  • Modal
  • Popover
  • Tooltip
  • Icon
  • Card
  • PricingCard
60 componentsapx-ds/renderer
DatePicker
Variant↳ other

Inputs

DatePicker

Single-date picker — composes

Examples

Basic

Loading preview…
Basic.tsx

CustomFormat

Loading preview…
CustomFormat.tsx

FormSubmission

Loading preview…
FormSubmission.tsx

Locales

Loading preview…
Locales.tsx

MinMax

Loading preview…
MinMax.tsx

Overview

Loading preview…
Overview.tsx

Presets

Loading preview…
Presets.tsx

Range

Loading preview…
Range.tsx

Props

PropTypeDefaultDescription
aria-describedbystring——
aria-labelstring——
aria-labelledbystring——
classNamestring——
clearablebooleantrueShow a clear button when there's a value.
closeOnSelectbooleantrueClose the popover after the user commits a selection.
colorenum——
defaultOpenbooleanfalseUncontrolled initial open state.
defaultValueDate | null—Uncontrolled initial value.
disabledboolean——
footerReactNode—Render below the calendar (e.g. extra actions or hints).
formatstring`'MM/dd/yyyy'`Display + parse pattern.
inputPropsOmit<InputProps, "value" | "defaultValue" | "onChange" | "type">—Props passed through to the underlying `<Input>` (e.g. `leftAddon`, `name`).
invalidboolean——
isDateDisabled((d: Date) => boolean)—Arbitrary disabled-day predicate.
localestring—Locale — drives weekday/month names + first-day-of-week.
maxDate—Upper bound (inclusive).
minDate—Lower bound (inclusive).
namestring—When set, an `<input type="hidden">` with the ISO-8601 value rides along for form posts.
numberOfMonthsnumber1How many months to render side-by-side.
onChange((value: Date | null) => void)—Fires when the selection changes (calendar click or typed input commit).
onOpenChange((open: boolean) => void)—Fires whenever the popover opens or closes.
openboolean—Controlled open state.
parse((input: string) => Date | null)—Custom parser. Defaults to `parseDateFormat(input, format, locale)`.
placeholderstring—Placeholder shown in the `<Input>`. Defaults to the `format` itself.
placementenum'bottom-start'—
presetsDatePickerPreset[]—Optional preset rail (e.g. "Today", "Tomorrow"). Hidden when empty.
readOnlyboolean——
requiredboolean——
showTriggerIconbooleantrueShow the calendar-icon trigger inside the input.
showWeekNumbersbooleanfalseShow the ISO week-number gutter.
sizeenum——
styleCSSProperties——
translationsPartial<CalendarTranslations>——
valueDate | null—Controlled value. Pair with `onChange`.
variantenum——
weekStartsOnenum—Override the locale-driven first day of week.