tarve
Docs GitHub

DatePicker

A button that opens a Calendar popup.

DatePickerProps packages/core/src/extra-controls.ts:501 ↗

Import

import { DatePicker } from "@tarve/core";

Usage

DatePicker.tsx
import { DatePicker } from "@tarve/core";

let open = false;
let month = "2026-09";
let date: string | undefined;

<DatePicker
  open={open}
  month={month}
  value={date}
  placeholder="Pick a date"
  onOpenChange={(next) => {
    open = next;
  }}
  onMonthChange={(next) => {
    month = next;
  }}
  onValueChange={(next) => {
    date = next;
    open = false;
  }}
/>

Props

PropTypeDefault
month required string—
open required boolean—
disabled boolean—
formatValue (date: string) => stringdefaultDatePickerLabel
isDateDisabled (date: string) => boolean—
max string—
min string—
onMonthChange (month: string) => void—
onOpenChange (open: boolean) => void—
onValueChange (date: string) => void—
placeholder string"Pick a date"
value string—
weekStartsOn CalendarWeekStartsOn0

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

CalendarWeekStartsOn
type CalendarWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;