Calendar

A date field component that allows users to enter and edit date.

December 2024

About

The <Calendar /> component is built on top of React DayPicker.

Installation

npx @kosori/cli add components calendar

Usage

import { Calendar } from '~/components/ui/calendar';
const [date, setDate] = useState<Date | undefined>(new Date())
 
return (
  <Calendar
    className='rounded-xl border shadow'
    mode='single'
    selected={selected}
    onSelect={setSelected}
  />
)

See the React DayPicker documentation for more information.

Examples

Form

Your date of birth is used to calculate your age.

On this page