its-just-ui/dist/components/DatePicker/DatePicker.d.ts

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';

export type DatePickerVariant = 'default' | 'bordered' | 'minimal' | 'inline-calendar' | 'popup-calendar' | 'withTime' | 'range' | 'month-only';
export type DatePickerSize = 'sm' | 'md' | 'lg';
export type DatePickerStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export type DatePickerTransition = 'none' | 'fade' | 'zoom' | 'slide';
export type DatePickerMode = 'single' | 'range' | 'multiple';
export type DatePickerView = 'day' | 'month' | 'year';
export interface DateRange {
    start?: Date;
    end?: Date;
}
export interface DisabledDateConfig {
    before?: Date;
    after?: Date;
    dates?: Date[];
    days?: number[];
    custom?: (date: Date) => boolean;
}
export interface LocaleConfig {
    locale?: string;
    monthNames?: string[];
    monthNamesShort?: string[];
    dayNames?: string[];
    dayNamesShort?: string[];
    firstDayOfWeek?: number;
    dateFormat?: string;
    timeFormat?: string;
    rtl?: boolean;
}
export interface DatePickerContextValue {
    selectedDate?: Date;
    selectedRange?: DateRange;
    selectedDates?: Date[];
    isOpen: boolean;
    currentView: DatePickerView;
    displayDate: Date;
    focusedDate?: Date;
    hoveredDate?: Date;
    mode: DatePickerMode;
    variant: DatePickerVariant;
    size: DatePickerSize;
    status: DatePickerStatus;
    transition: DatePickerTransition;
    locale: LocaleConfig;
    disabledDates?: DisabledDateConfig;
    minDate?: Date;
    maxDate?: Date;
    showTime: boolean;
    clearable: boolean;
    todayButton: boolean;
    readOnly: boolean;
    setSelectedDate: (date?: Date) => void;
    setSelectedRange: (range?: DateRange) => void;
    setSelectedDates: (dates?: Date[]) => void;
    setIsOpen: (open: boolean) => void;
    setCurrentView: (view: DatePickerView) => void;
    setDisplayDate: (date: Date) => void;
    setFocusedDate: (date?: Date) => void;
    setHoveredDate: (date?: Date) => void;
    onDateSelect: (date: Date) => void;
    onClear: () => void;
    onTodayClick: () => void;
    isDateDisabled: (date: Date) => boolean;
    isDateSelected: (date: Date) => boolean;
    isDateInRange: (date: Date) => boolean;
    isDateToday: (date: Date) => boolean;
    formatDate: (date: Date) => string;
    renderDay?: DayRenderer;
    inputId: string;
    calendarId: string;
    labelId?: string;
    descriptionId?: string;
    errorId?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    selectedBackgroundColor?: string;
    todayBorderColor?: string;
    focusRingColor?: string;
    boxShadow?: string;
    calendarPopupShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    calendarPadding?: string;
    selectedDateColor?: string;
    disabledDateColor?: string;
}
export type DayRenderer = (date: Date, isSelected: boolean, isDisabled: boolean, isToday: boolean, isInRange: boolean) => React.ReactNode;
export type HeaderRenderer = (displayDate: Date, view: DatePickerView, onPrevious: () => void, onNext: () => void, onViewChange: (view: DatePickerView) => void) => React.ReactNode;
export type FooterRenderer = () => React.ReactNode;
export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'defaultValue'> {
    value?: Date | DateRange | Date[];
    defaultValue?: Date | DateRange | Date[];
    mode?: DatePickerMode;
    variant?: DatePickerVariant;
    size?: DatePickerSize;
    status?: DatePickerStatus;
    transition?: DatePickerTransition;
    open?: boolean;
    defaultOpen?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    clearable?: boolean;
    minDate?: Date;
    maxDate?: Date;
    disabledDates?: DisabledDateConfig;
    showTime?: boolean;
    todayButton?: boolean;
    locale?: LocaleConfig;
    placeholder?: string;
    inline?: boolean;
    closeOnSelect?: boolean;
    label?: string;
    helperText?: string;
    errorText?: string;
    clearButtonLabel?: string;
    todayButtonLabel?: string;
    calendarIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    previousIcon?: React.ReactNode;
    nextIcon?: React.ReactNode;
    renderDay?: DayRenderer;
    renderHeader?: HeaderRenderer;
    renderFooter?: FooterRenderer;
    onChange?: (value?: Date | DateRange | Date[]) => void;
    onOpenChange?: (open: boolean) => void;
    onFocus?: (e: React.FocusEvent) => void;
    onBlur?: (e: React.FocusEvent) => void;
    onHoverDateChange?: (date?: Date) => void;
    onViewModeChange?: (view: DatePickerView) => void;
    onClear?: () => void;
    onTodayClick?: () => void;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    selectedBackgroundColor?: string;
    todayBorderColor?: string;
    focusRingColor?: string;
    boxShadow?: string;
    calendarPopupShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    calendarPadding?: string;
    selectedDateColor?: string;
    disabledDateColor?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-labelledby'?: string;
    'aria-required'?: boolean;
    'aria-invalid'?: boolean;
}
export declare const useDatePicker: () => DatePickerContextValue;
export interface DatePickerInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    calendarIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    onCalendarClick?: () => void;
    onClearClick?: () => void;
}
export declare const DatePickerInput: React.NamedExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
export interface DatePickerCalendarProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
export declare const DatePickerCalendar: React.NamedExoticComponent<DatePickerCalendarProps & React.RefAttributes<HTMLDivElement>>;
export interface DatePickerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    showMonthSelector?: boolean;
    showYearSelector?: boolean;
    previousIcon?: React.ReactNode;
    nextIcon?: React.ReactNode;
}
export declare const DatePickerHeader: React.NamedExoticComponent<DatePickerHeaderProps & React.RefAttributes<HTMLDivElement>>;
export interface DatePickerDayProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    date: Date;
    isSelected?: boolean;
    isDisabled?: boolean;
    isToday?: boolean;
    isInRange?: boolean;
    isRangeStart?: boolean;
    isRangeEnd?: boolean;
    isOtherMonth?: boolean;
}
export declare const DatePickerDay: React.NamedExoticComponent<DatePickerDayProps & React.RefAttributes<HTMLButtonElement>>;
export interface DatePickerDaysViewProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
export declare const DatePickerDaysView: React.NamedExoticComponent<DatePickerDaysViewProps & React.RefAttributes<HTMLDivElement>>;
export interface DatePickerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    showTodayButton?: boolean;
    showClearButton?: boolean;
    todayButtonLabel?: string;
    clearButtonLabel?: string;
    children?: React.ReactNode;
}
export declare const DatePickerFooter: React.NamedExoticComponent<DatePickerFooterProps & React.RefAttributes<HTMLDivElement>>;
interface DatePickerComponent extends React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>> {
    Input: typeof DatePickerInput;
    Calendar: typeof DatePickerCalendar;
    Header: typeof DatePickerHeader;
    Day: typeof DatePickerDay;
    DaysView: typeof DatePickerDaysView;
    Footer: typeof DatePickerFooter;
}
declare const DatePicker: DatePickerComponent;
export { DatePicker };
export default DatePicker;