Calendar
Exports
@mbsw/ui에서 가져올 수 있는 항목입니다.
CalendarCALENDAR_DEFAULT_LABELSCALENDAR_LOCALESDatePickerDatePickerContentDatePickerTriggerProps
컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.
Calendar
| Prop | Type | 필수 여부 |
|---|---|---|
children | ReactNode | 선택 |
defaultMonth | Date | 선택 |
defaultView | 'day' | 'month' | 'year' | 선택 |
disabled | Matcher | Matcher[] | 선택 |
labels | Partial<CalendarLabels> | 선택 |
month | Date | 선택 |
onMonthChange | ((month: Date) => void) | 선택 |
onViewChange | ((view: CalendarView) => void) | 선택 |
today | Date | 필수 |
view | 'day' | 'month' | 'year' | 선택 |
mode | "single" | "range" | 조건부 |
defaultSelected | Date | CalendarDateRange | 선택 |
selected | Date | CalendarDateRange | 선택 |
onSelect | ((date: Date | undefined) => void) | ((range: CalendarDateRange | undefined) => void) | 선택 |
DatePicker
| Prop | Type | 필수 여부 |
|---|---|---|
children | ReactNode | 선택 |
defaultOpen | boolean | 선택 |
open | boolean | 선택 |
onOpenChange | ((open: boolean) => void) | 선택 |
DatePickerContent
DatePickerTrigger
| Prop | Type | 필수 여부 |
|---|---|---|
children | ReactElement<unknown, string | JSXElementConstructor<any>> | 필수 |
standaloneBind to the nearest official Popover instead of an enclosing DatePicker. | boolean | 선택 |
Type reference
전체 타입 보기
속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.
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>>;