@itwin/itwinui-react/esm/core/DatePicker/DatePicker.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import type { TimePickerProps } from '../TimePicker/TimePicker.js';
export type DatePickerLocalizedNames = {
    [key in 'months' | 'shortDays' | 'days']: string[];
};
/**
 * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
 * If locale is not passed, browser locale will be used.
 */
export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
export type DateRangePickerProps = {
    /**
     * Enable date range support.
     * @default false
     */
    enableRangeSelect?: false;
    /**
     * Selected start date
     */
    startDate?: undefined;
    /**
     * Selected end date
     */
    endDate?: undefined;
    /**
     * Callback when date is changed.
     */
    onChange?: (date: Date) => void;
} | {
    enableRangeSelect: true;
    startDate?: Date;
    endDate?: Date;
    onChange?: (startDate: Date, endDate: Date) => void;
};
type DatePickerProps = {
    /**
     * Selected date.
     */
    date?: Date;
    /**
     * Pass localized week days (start from sunday) and months.
     * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
     */
    localizedNames?: DatePickerLocalizedNames;
    /**
     * Set focus on selected day or today.
     * @default false
     */
    setFocus?: boolean;
    /**
     * Show time picker near the calendar.
     * @default false
     */
    showTime?: boolean;
    /**
     * Show additional buttons to select year.
     * @default false
     */
    showYearSelection?: boolean;
    /**
     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
     */
    monthYearProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for only month, referring to span that wraps around the month title.
     */
    monthProps?: React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for week days, referring to div that wraps around the week day title.
     */
    weekDayProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
     */
    dayProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
     */
    calendarProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for weeks, referring to div that wraps around weeks.
     */
    weekProps?: React.ComponentProps<'div'>;
    /**
     * Will disable dates for which this function returns true.
     * Disabled dates cannot be selected.
     */
    isDateDisabled?: (date: Date) => boolean;
    /**
     * Whether there is a background, border, shadow, etc.
     *
     * Should be set to true if used in a popover that doesn't have its own background,
     * or set to false if the popover has its own background or embedding within a page.
     *
     * @default true
     */
    applyBackground?: boolean;
    /**
     * Whether dates outside the current month should be displayed (in a muted text style).
     *
     * It is recommended to set this to false. Currently it defaults to true for backward compatibility.
     *
     * @default true
     */
    showDatesOutsideMonth?: boolean;
} & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
/**
 * Date picker component
 * @example
 * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
 */
export declare const DatePicker: PolymorphicForwardRefComponent<"div", DatePickerProps>;
export {};