@fluentui/react-northstar/dist/es/components/Datepicker/Datepicker.d.ts

A themable React component library.

import { Accessibility, DatepickerBehaviorProps, AccessibilityAttributes } from '@fluentui/accessibility';
import { ICalendarStrings, IDatepickerOptions } from '../../utils/date-time-utilities';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, FluentComponentStaticProps, ShorthandValue } from '../../types';
import { UIComponentProps } from '../../utils';
import { Input, InputProps } from '../Input/Input';
import { PopupProps } from '../Popup/Popup';
import { DatepickerCalendar, DatepickerCalendarProps } from './DatepickerCalendar';
import { DatepickerCalendarCell } from './DatepickerCalendarCell';
import { DatepickerCalendarCellButton } from './DatepickerCalendarCellButton';
import { DatepickerCalendarHeader } from './DatepickerCalendarHeader';
import { DatepickerCalendarHeaderAction } from './DatepickerCalendarHeaderAction';
import { DatepickerCalendarHeaderCell } from './DatepickerCalendarHeaderCell';
import { DatepickerCalendarGrid } from './DatepickerCalendarGrid';
import { DatepickerCalendarGridRow } from './DatepickerCalendarGridRow';
export interface DatepickerProps extends UIComponentProps, Partial<ICalendarStrings>, Partial<IDatepickerOptions> {
    /** Accessibility behavior if overridden by the user. */
    accessibility?: Accessibility<DatepickerBehaviorProps>;
    /** Identifies the element (or elements) that labels the current element. Will be passed to `input` with usage accessibibility behavior. */
    'aria-labelledby'?: AccessibilityAttributes['aria-labelledby'];
    /** Indicates the entered value does not conform to the format expected by the application. Will be passed to `input` with usage accessibibility behavior. */
    'aria-invalid'?: AccessibilityAttributes['aria-invalid'];
    /** Shorthand for the datepicker calendar. */
    calendar?: ShorthandValue<DatepickerCalendarProps>;
    /** Shorthand for the datepicker popup. */
    popup?: ShorthandValue<PopupProps>;
    /** Shorthand for the date text input. */
    input?: ShorthandValue<InputProps>;
    /** Datepicker shows it is currently unable to be interacted with. */
    disabled?: boolean;
    /** Date needs to be entered, otherwise datepicker produces an error state. */
    required?: boolean;
    /**
     * Called on change of the date.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onDateChange?: ComponentEventHandler<DatepickerProps & {
        value: Date;
    }>;
    /**
     * Called on error when changing the date.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onDateChangeError?: ComponentEventHandler<DatepickerProps & {
        error: string;
    }>;
    /** Target dates can be also entered through the input field. */
    allowManualInput?: boolean;
    /** The component automatically overrides faulty manual input upon blur. */
    fallbackToLastCorrectDateOnBlur?: boolean;
    /** Initial 'calendarOpenState' value. */
    defaultCalendarOpenState?: boolean;
    /** Controls the calendar's open state. */
    calendarOpenState?: boolean;
    /**
     * Called on change of the open state.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onCalendarOpenStateChange?: ComponentEventHandler<DatepickerProps>;
    /** Initial 'selectedDate' value. */
    defaultSelectedDate?: Date;
    /** Controls the calendar's 'selectedDate'. */
    selectedDate?: Date;
    /** Marks that the datepicker should only render the input field and not the trigger button with an icon. */
    inputOnly?: boolean;
    /** Marks that the datepicker should only render the trigger button with an icon and not the input field. */
    buttonOnly?: boolean;
}
export declare type DatepickerStylesProps = Pick<DatepickerProps, 'allowManualInput'>;
export declare const datepickerClassName = "ui-datepicker";
/**
 * A Datepicker is a control which is used to display dates grid and allow user to select them.
 *
 * @accessibilityIssues
 * [NVDA - Aria-selected is not narrated for the gridcell](https://github.com/nvaccess/nvda/issues/11986)
 */
export declare const Datepicker: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof DatepickerProps> & {
    as?: TExtendedElementType;
} & DatepickerProps) => JSX.Element) & {
    propTypes?: React.WeakValidationMap<DatepickerProps> & {
        as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
    };
    contextTypes?: PropTypes.ValidationMap<any>;
    defaultProps?: Partial<DatepickerProps & {
        as: "div";
    }>;
    displayName?: string;
    readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
        ref?: React.Ref<HTMLDivElement>;
    }, "as" | keyof DatepickerProps> & {
        as?: "div";
    } & DatepickerProps;
} & FluentComponentStaticProps<DatepickerProps> & {
    Calendar: typeof DatepickerCalendar;
    CalendarHeader: typeof DatepickerCalendarHeader;
    CalendarHeaderAction: typeof DatepickerCalendarHeaderAction;
    CalendarHeaderCell: typeof DatepickerCalendarHeaderCell;
    CalendarCell: typeof DatepickerCalendarCell;
    CalendarCellButton: typeof DatepickerCalendarCellButton;
    CalendarGrid: typeof DatepickerCalendarGrid;
    CalendarGridRow: typeof DatepickerCalendarGridRow;
    Input: typeof Input;
};