Calendar

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Calendar
CALENDAR_DEFAULT_LABELS
CALENDAR_LOCALES
DatePicker
DatePickerContent
DatePickerTrigger

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

Calendar

Calendar 속성
PropType필수 여부
childrenReactNode선택
defaultMonthDate선택
defaultView'day' | 'month' | 'year'선택
disabledMatcher | Matcher[]선택
labelsPartial<CalendarLabels>선택
monthDate선택
onMonthChange((month: Date) => void)선택
onViewChange((view: CalendarView) => void)선택
todayDate필수
view'day' | 'month' | 'year'선택
mode"single" | "range"조건부
defaultSelectedDate | CalendarDateRange선택
selectedDate | CalendarDateRange선택
onSelect((date: Date | undefined) => void) | ((range: CalendarDateRange | undefined) => void)선택

DatePicker

DatePicker 속성
PropType필수 여부
childrenReactNode선택
defaultOpenboolean선택
openboolean선택
onOpenChange((open: boolean) => void)선택

DatePickerContent

DatePickerContent 속성
PropType필수 여부
aria-label

Defines a string value that labels the current element.

string조건부
aria-labelledby

Identifies the element (or elements) that labels the current element.

string조건부
calendarPropsCalendarProps & { ref?: Ref<HTMLDivElement> | undefined; }필수

DatePickerTrigger

DatePickerTrigger 속성
PropType필수 여부
childrenReactElement<unknown, string | JSXElementConstructor<any>>필수
standalone

Bind to the nearest official Popover instead of an enclosing DatePicker.

boolean선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 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>>;