Calendar
General utility Calendar component with days, months and year support.
Usage
March
2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
function CalendarUsage() {
const [date, setDate] = useState<Date | undefined>()
return (
<View>
<Calendar
selectedDate={date}
onDateChange={(value?: Date) => setDate(value)}
/>
</View>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | BaseUIProps | -- | Inherits properties from BaseUIProps |
| selectedDate | string | Date | -- | The default selected date.Can be a string (formatted date) or a Date object. |
| displayDateFormat | string | -- | The format in which the date should be displayed inside the input value |
| outputDateFormat | string | -- | The format in which the selected date should give outputAnd this format should be used whenever you are passing any date to this component |
| disableDates | (string | Date)[] | -- | An array of disabled dates of string (in outputDateFormat) or a Date object.Make sure to provide the outputDateFormat prop too if passing date as string |
| onDateChange | (date?: Date, displayDate?: string, outputDate?: string) => void | -- | Callback triggered when a date is selected. |
| yearListProps | Pick<YearListProps, "minYear" | "maxYear"> | -- | Props for configuring the year list (min and max year). |
| status | BlossomStatus | primary | -- |
| size | BlossomSize | medium | -- |