Calendar

Stable

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

Examples

Basic Usage

SuMoTuWeThFrSa
tsx
import { Calendar } from "@siberui/react"

export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  )
}

Neon Variant

SuMoTuWeThFrSa
tsx
<Calendar variant="neon" mode="single" selected={date} onSelect={setDate} />

API Reference

PropertyDescriptionTypeDefault
variantVisual style for the calendar."default" | "neon" | "glass"-
modeSelection mode (from react-day-picker)."single" | "multiple" | "range"-
selectedThe selected date(s).Date | Date[] | DateRange-
onSelectEvent handler called when date is selected.(date: Date) => void-