Date Picker

A select component for picking dates.

SourceDependency API

Installation

npx @rahimstack@latest add date-picker

Usage

Locale

The locale is set to en-US by default. To change it, you can use the locale prop.

import { DatePicker } from "@/workshop/date-picker"
import * as React from "react"
import { fr } from "date-fns/locale"
 
export default function DatePickerDemo() {
    const [value, setValue] = React.useState<Date | undefined>(new Date())
 
    return (
        <DatePicker
            value={value}
            onValueChange={setValue}
            locale={fr}
        />
    )
}

Options

You can use the pickerOptions prop to set rules for the date picker. These options are passed to the calendar component. You can read more about the options here.

Example
<DatePicker
    {...props}
    pickerOptions={{
        disabled: { before: new Date() } // Disables all dates before today
    }}
/>

Uncontrolled

  • Input type: date, Ref prop: inputRef
  • Value type: date ("yyyy-MM-dd")
  • If not required, an empty string will be submitted if the input is empty.

API Reference

const DatePickerAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-DatePicker__root",
        "line-clamp-1 text-left"
    ]),
    placeholder: cva([
        "UI-DatePicker__placeholder",
        "text-[--muted]",
    ]),
})