Docs
Calendar

Calendar

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

API Reference
SuMoTuWeThFrSa

Installation

npm install @brudi/react-calendar

Usage

import { Calendar } from "@brudi/react-calendar"
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-md border"
  />

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

"use client"
 
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
 
import { ax } from "@brudi/react"
import { Button } from "@brudi/react-button"
import { Calendar } from "@brudi/react-calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@brudi/react-popover"
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </PopoverContent>
    </Popover>
  )
}

See the React DatePicker documentation for more information.

Date Picker

Examples

Form

Your date of birth is used to calculate your age.

Date Picker

Date Range Picker

With Presets

Form

Your date of birth is used to calculate your age.

Customization

npx @brudi/ui extend calendar

ButtonCard