Calendar
Exports
Import these components from @mbsw/ui.
CalendarCALENDAR_DEFAULT_LABELSCALENDAR_LOCALESDatePickerDatePickerContentDatePickerTriggerProps
The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.
Calendar
| Prop | Type | Requirement |
|---|---|---|
children | ReactNode | Optional |
defaultMonth | Date | Optional |
defaultView | 'day' | 'month' | 'year' | Optional |
disabled | Matcher | Matcher[] | Optional |
labels | Partial<CalendarLabels> | Optional |
month | Date | Optional |
onMonthChange | ((month: Date) => void) | Optional |
onViewChange | ((view: CalendarView) => void) | Optional |
today | Date | Required |
view | 'day' | 'month' | 'year' | Optional |
mode | "single" | "range" | Conditional |
defaultSelected | Date | CalendarDateRange | Optional |
selected | Date | CalendarDateRange | Optional |
onSelect | ((date: Date | undefined) => void) | ((range: CalendarDateRange | undefined) => void) | Optional |
DatePicker
| Prop | Type | Requirement |
|---|---|---|
children | ReactNode | Optional |
defaultOpen | boolean | Optional |
open | boolean | Optional |
onOpenChange | ((open: boolean) => void) | Optional |
DatePickerContent
| Prop | Type | Requirement |
|---|---|---|
aria-labelDefines a string value that labels the current element. | string | Conditional |
aria-labelledbyIdentifies the element (or elements) that labels the current element. | string | Conditional |
calendarProps | CalendarProps & { ref?: Ref<HTMLDivElement> | undefined; } | Required |
DatePickerTrigger
| Prop | Type | Requirement |
|---|---|---|
children | ReactElement<unknown, string | JSXElementConstructor<any>> | Required |
standaloneBind to the nearest official Popover instead of an enclosing DatePicker. | boolean | Optional |
Type reference
Show full types
Full TypeScript definitions, including prop combinations and inherited props.
TYPESCRIPT
import { type DayButtonProps, type DayPickerLocale, type Matcher } from 'react-day-picker';
import { type ComponentPropsWithoutRef, type ReactNode, type Ref, type CSSProperties, type ReactElement } from 'react';
import { Tabs as TabsPrimitive, Popover as PopoverPrimitive } from 'radix-ui';
type DataAttributes = {
[key: `data-${string}`]: boolean | number | string | undefined;
};
export type CalendarView = 'day' | 'month' | 'year';
export type CalendarLabels = {
day: string;
month: string;
year: string;
today: string;
previousMonth: string;
nextMonth: string;
viewPicker: string;
/** Seven weekday names, Sunday first. */
weekdays: readonly string[];
formatMonth: (date: Date) => string;
formatMonthName: (date: Date) => string;
formatYear: (year: number) => string;
monthPicker: string;
yearPicker: string;
monthName: string;
yearName: string;
selectedPeriod: (periodName: string) => string;
currentPeriod: (periodName: string) => string;
rangePreviewStart: string;
rangePreviewMiddle: string;
rangePreviewEnd: string;
locale: Partial<DayPickerLocale>;
};
export declare const CALENDAR_LOCALES: {
en: DayPickerLocale;
ko: DayPickerLocale;
};
export declare const CALENDAR_DEFAULT_LABELS: CalendarLabels;
type CalendarRootProps = Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'activationMode' | 'asChild' | 'orientation'>;
type CalendarBaseProps = Omit<CalendarRootProps, 'defaultValue' | 'onSelect' | 'onValueChange' | 'value'> & DataAttributes & {
children?: ReactNode;
defaultMonth?: Date;
defaultView?: CalendarView;
disabled?: Matcher | Matcher[];
labels?: Partial<CalendarLabels>;
month?: Date;
onMonthChange?: (month: Date) => void;
onViewChange?: (view: CalendarView) => void;
today: Date;
view?: CalendarView;
};
export type CalendarDateRange = {
from: Date;
to?: Date;
};
export type CalendarProps = CalendarBaseProps & ({
mode?: 'single';
defaultSelected?: Date;
selected?: Date;
onSelect?: (date: Date | undefined) => void;
} | {
mode: 'range';
defaultSelected?: CalendarDateRange;
selected?: CalendarDateRange;
onSelect?: (range: CalendarDateRange | undefined) => void;
});
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
export type DatePickerProps = {
children?: ReactNode;
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
};
export type DatePickerTriggerProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>, 'asChild' | 'children'> & DataAttributes & {
children: ReactElement;
/** Bind to the nearest official Popover instead of an enclosing DatePicker. */
standalone?: boolean;
};
type PanelProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'asChild' | 'deferPointerDownOutside' | 'forceMount' | 'role'> & DataAttributes;
export type DatePickerContentProps = PanelProps & {
calendarProps: CalendarProps & {
ref?: Ref<HTMLDivElement>;
};
} & ({
'aria-label': string;
'aria-labelledby'?: string;
} | {
'aria-label'?: string;
'aria-labelledby': string;
});
export declare function DatePicker({ children, defaultOpen, open, onOpenChange, }: DatePickerProps): import("react").JSX.Element;
export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & DataAttributes & {
children: ReactElement;
/** Bind to the nearest official Popover instead of an enclosing DatePicker. */
standalone?: boolean;
} & import("react").RefAttributes<HTMLElement>>;
export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;