@fluentui/react-datepicker-compat 0.0.0-beta.1

package/dist/index.d.ts

@@ -0,0 +1,1156 @@
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { Field } from '@fluentui/react-field';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Input } from '@fluentui/react-input';
+import type { PopoverProps } from '@fluentui/react-popover';
+import { PopoverSurface } from '@fluentui/react-popover';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Returns a date offset from the given date by the specified number of days.
+ * @param date - The origin date
+ * @param days - The number of days to offset. 'days' can be negative.
+ * @returns A new Date object offset from the origin date by the given number of days
+ */
+export declare function addDays(date: Date, days: number): Date;
+
+/**
+ * Returns a date offset from the given date by the specified number of months.
+ * The method tries to preserve the day-of-month; however, if the new month does not have enough days
+ * to contain the original day-of-month, we'll use the last day of the new month.
+ * @param date - The origin date
+ * @param months - The number of months to offset. 'months' can be negative.
+ * @returns A new Date object offset from the origin date by the given number of months
+ */
+export declare function addMonths(date: Date, months: number): Date;
+
+/**
+ * Returns a date offset from the given date by the specified number of weeks.
+ * @param date - The origin date
+ * @param weeks - The number of weeks to offset. 'weeks' can be negative.
+ * @returns A new Date object offset from the origin date by the given number of weeks
+ */
+export declare function addWeeks(date: Date, weeks: number): Date;
+
+/**
+ * Returns a date offset from the given date by the specified number of years.
+ * The method tries to preserve the day-of-month; however, if the new month does not have enough days
+ * to contain the original day-of-month, we'll use the last day of the new month.
+ * @param date - The origin date
+ * @param years - The number of years to offset. 'years' can be negative.
+ * @returns A new Date object offset from the origin date by the given number of years
+ */
+export declare function addYears(date: Date, years: number): Date;
+
+export declare enum AnimationDirection {
+    /**
+     * Grid will transition out and in horizontally
+     */
+    Horizontal = 0,
+    /**
+     * Grid will transition out and in vertically
+     */
+    Vertical = 1
+}
+
+/**
+ * @internal
+ */
+declare interface CalendarDayGridProps extends DayGridOptions {
+    /**
+     * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<ICalendarDayGrid>;
+    /**
+     * Additional CSS class(es) to apply to the CalendarDayGrid.
+     */
+    className?: string;
+    /**
+     * Localized strings to use in the CalendarDayGrid
+     */
+    strings: CalendarStrings;
+    /**
+     * The currently selected date
+     */
+    selectedDate: Date;
+    /**
+     * The currently navigated date
+     */
+    navigatedDate: Date;
+    /**
+     * Callback issued when a date is selected
+     * @param date - The date the user selected
+     * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
+     * for the component.
+     */
+    onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
+    /**
+     * Callback issued when a date in the calendar is navigated
+     * @param date - The date that is navigated to
+     * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
+     */
+    onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
+    /**
+     * Callback issued when calendar day is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * The first day of the week for your locale.
+     * @default DayOfWeek.Sunday
+     */
+    firstDayOfWeek: DayOfWeek;
+    /**
+     * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
+     * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+     * @default FirstWeekOfYear.FirstDay
+     */
+    firstWeekOfYear: FirstWeekOfYear;
+    /**
+     * The date range type indicating how  many days should be selected as the user
+     * selects days
+     * @default DateRangeType.Day
+     */
+    dateRangeType: DateRangeType;
+    /**
+     * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
+     * views.
+     * @default 1
+     */
+    daysToSelectInDayView?: number;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     * @default false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter: DateFormatting;
+    /**
+     * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the
+     * specific day.
+     */
+    customDayCellRef?: (element: HTMLElement, date: Date, classNames: CalendarDayGridStyles) => void;
+    /**
+     * How many weeks to show by default. If not provided, will show enough weeks to display the current
+     * month, between 4 and 6 depending
+     * @default undefined
+     */
+    weeksToShow?: number;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * If set the Calendar will not allow selection of dates in this array.
+     */
+    restrictedDates?: Date[];
+    /**
+     * The days that are selectable when `dateRangeType` is WorkWeek.
+     * If `dateRangeType` is not WorkWeek this property does nothing.
+     * @default [Monday,Tuesday,Wednesday,Thursday,Friday]
+     */
+    workWeekDays?: DayOfWeek[];
+    /**
+     * Whether the close button should be shown or not
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Allows all dates and buttons to be focused, including disabled ones
+     * @default false
+     */
+    allFocusable?: boolean;
+    /**
+     * The ID of the control that labels this one
+     */
+    labelledBy?: string;
+    /**
+     * Whether to show days outside the selected month with lighter styles
+     * @default true
+     */
+    lightenDaysOutsideNavigatedMonth?: boolean;
+    /**
+     * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
+     */
+    animationDirection?: AnimationDirection;
+    /**
+     * Optional callback function to mark specific days with a small symbol. Fires when the date range changes,
+     * gives the starting and ending displayed dates and expects the list of which days in between should be
+     * marked.
+     */
+    getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];
+}
+
+/**
+ * @internal
+ */
+declare interface CalendarDayGridStyles {
+    /**
+     * The style for the root div
+     */
+    wrapper?: string;
+    /**
+     * The style for the table containing the grid
+     */
+    table?: string;
+    /**
+     * The style to apply to the grid cells for days
+     */
+    dayCell?: string;
+    /**
+     * The style to apply to grid cells for days in the selected range
+     */
+    daySelected?: string;
+    /**
+     * The style to apply to row around weeks
+     */
+    weekRow?: string;
+    /**
+     * The style to apply to the column headers above the weeks
+     */
+    weekDayLabelCell?: string;
+    /**
+     * The style to apply to grid cells for week numbers
+     */
+    weekNumberCell?: string;
+    /**
+     * The style to apply to individual days that are outside the min/max date range
+     */
+    dayOutsideBounds?: string;
+    /**
+     * The style to apply to individual days that are outside the current month
+     */
+    dayOutsideNavigatedMonth?: string;
+    /**
+     * The style to apply to the button element within the day cells
+     */
+    dayButton?: string;
+    /**
+     * The style to apply to the individual button element that matches the "today" parameter
+     */
+    dayIsToday?: string;
+    /**
+     * The style applied to the first placeholder week used during transitions
+     */
+    firstTransitionWeek?: string;
+    /**
+     * The style applied to the last placeholder week used during transitions
+     */
+    lastTransitionWeek?: string;
+    /**
+     * The style applied to the marker on days to mark as important
+     */
+    dayMarker?: string;
+}
+
+export declare interface CalendarDayProps extends CalendarDayGridProps {
+    /**
+     * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<ICalendarDay>;
+    /**
+     * Additional CSS class(es) to apply to the CalendarDay.
+     */
+    className?: string;
+    /**
+     * Localized strings to use in the Calendar
+     */
+    strings: CalendarStrings;
+    /**
+     * The currently navigated date
+     */
+    navigatedDate: Date;
+    /**
+     * Callback issued when a date in the calendar is navigated
+     * @param date - The date that is navigated to
+     * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
+     */
+    onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
+    /**
+     * Callback issued when calendar day is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * Callback function when the header is selected
+     */
+    onHeaderSelect?: () => void;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     * @default false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter: DateFormatting;
+    /**
+     * Whether the calendar should show 6 weeks by default.
+     * @default false
+     */
+    showSixWeeksByDefault?: boolean;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * If set the Calendar will not allow selection of dates in this array.
+     */
+    restrictedDates?: Date[];
+    /**
+     * Whether the close button should be shown or not
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Allows all dates and buttons to be focused, including disabled ones
+     * @default false
+     */
+    allFocusable?: boolean;
+}
+
+export declare interface CalendarMonthProps {
+    /**
+     * Optional callback to access the ICalendarMonth interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<ICalendarMonth>;
+    /**
+     * Localized strings to use in the Calendar
+     */
+    strings: CalendarStrings;
+    /**
+     * The currently selected date
+     */
+    selectedDate: Date;
+    /**
+     * The currently navigated date
+     */
+    navigatedDate: Date;
+    /**
+     * Callback issued when a month is selected
+     * @param date - The date the user selected
+     * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
+     * for the component.
+     */
+    onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
+    /**
+     * Callback issued when the year is navigated
+     * @param date - The date that is navigated to
+     * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
+     */
+    onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * Callback function when the header is selected
+     */
+    onHeaderSelect?: () => void;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter?: DateFormatting;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * Whether the month picker should highlight the current month
+     * @default false
+     */
+    highlightCurrentMonth?: boolean;
+    /**
+     * Whether the month picker should highlight the selected month
+     * @default false
+     */
+    highlightSelectedMonth?: boolean;
+    /**
+     * Allows all dates and buttons to be focused, including disabled ones
+     * @default false
+     */
+    allFocusable?: boolean;
+    /**
+     * Additional CSS class(es) to apply to the CalendarMonth.
+     */
+    className?: string;
+    /**
+     * Whether the year picker is hidden
+     * @default false
+     */
+    yearPickerHidden?: boolean;
+    /**
+     * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
+     */
+    animationDirection?: AnimationDirection;
+}
+
+export declare interface CalendarProps extends React_2.RefAttributes<HTMLDivElement> {
+    /**
+     * Optional callback to access the ICalendar interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<ICalendar>;
+    /**
+     * Customized props for the calendar day
+     */
+    calendarDayProps?: Partial<CalendarDayProps>;
+    /**
+     * Customized props for the calendar month
+     */
+    calendarMonthProps?: Partial<CalendarMonthProps>;
+    /**
+     * Optional class name to add to the root element.
+     */
+    className?: string;
+    /**
+     * Callback for when a date is selected
+     * @param date - The date the user selected
+     * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
+     * for the component.
+     */
+    onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
+    /**
+     * Callback for when calendar is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * ID for the calendar
+     */
+    id?: string;
+    /**
+     * Default value of the Calendar, if any
+     */
+    value?: Date;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * The date range type indicating how many days should be selected as the user
+     * selects days
+     * @default DateRangeType.Day
+     */
+    dateRangeType?: DateRangeType;
+    /**
+     * The first day of the week for your locale.
+     * @default DayOfWeek.Sunday
+     */
+    firstDayOfWeek?: DayOfWeek;
+    /**
+     * Defines when the first week of the year should start.
+     * @default FirstWeekOfYear.FirstDay
+     */
+    firstWeekOfYear?: FirstWeekOfYear;
+    /**
+     * Whether the month picker is shown beside the day picker or hidden.
+     * @default true
+     */
+    isMonthPickerVisible?: boolean;
+    /**
+     * Whether the day picker is shown beside the month picker or hidden.
+     * @default true
+     */
+    isDayPickerVisible?: boolean;
+    /**
+     * Show month picker on top of date picker when visible.
+     * @default false
+     */
+    showMonthPickerAsOverlay?: boolean;
+    /**
+     * Whether the "Go to today" link should be shown or not
+     */
+    showGoToToday?: boolean;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     * @default false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Localized strings to use in the Calendar
+     */
+    strings?: CalendarStrings;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter?: DateFormatting;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * If set the Calendar will not allow selection of dates in this array.
+     */
+    restrictedDates?: Date[];
+    /**
+     * Whether the calendar should show 6 weeks by default.
+     * @default false
+     */
+    showSixWeeksByDefault?: boolean;
+    /**
+     * The days that are selectable when `dateRangeType` is `WorkWeek`.
+     * If `dateRangeType` is not `WorkWeek` this property does nothing.
+     * @default [Monday,Tuesday,Wednesday,Thursday,Friday]
+     */
+    workWeekDays?: DayOfWeek[];
+    /**
+     * Whether the month picker should highlight the current month
+     * @default false
+     */
+    highlightCurrentMonth?: boolean;
+    /**
+     * Whether the month picker should highlight the selected month
+     * @default false
+     */
+    highlightSelectedMonth?: boolean;
+    /**
+     * Whether the close button should be shown or not
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Allows all dates and buttons to be focused, including disabled ones
+     * @default false
+     */
+    allFocusable?: boolean;
+}
+
+export declare interface CalendarStrings extends DateGridStrings {
+    /**
+     * String to render for button to direct the user to today's date.
+     */
+    goToToday: string;
+    /**
+     * Aria-label for the "previous month" button in day picker.
+     */
+    prevMonthAriaLabel?: string;
+    /**
+     * Aria-label for the "next month" button in day picker.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Aria-label for the "previous year" button in month picker.
+     */
+    prevYearAriaLabel?: string;
+    /**
+     * Aria-label for the "next year" button in month picker.
+     */
+    nextYearAriaLabel?: string;
+    /**
+     * Aria-label for the "previous year range" button in year picker.
+     */
+    prevYearRangeAriaLabel?: string;
+    /**
+     * Aria-label for the "next year range" button in year picker.
+     */
+    nextYearRangeAriaLabel?: string;
+    /**
+     * Aria-label format string for the header button in the month picker. Should have 1 string param, e.g. "`{0}`,
+     * select to change the year". This aria-label will only be applied if the year picker is enabled; otherwise
+     * the label will default to the header string, e.g. "2019".
+     */
+    monthPickerHeaderAriaLabel?: string;
+    /**
+     * Aria-label format string for the header button in the year picker.
+     * Should have 1 string param, e.g. "`{0}`, select to change the month"
+     */
+    yearPickerHeaderAriaLabel?: string;
+    /**
+     * Aria-label for the "close" button.
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Aria-label format string for the week number header. Should have 1 string param, e.g. "week number `{0}`"
+     */
+    weekNumberFormatString?: string;
+    /**
+     * Aria-label format string for the currently selected date. Should have 1 string param, e.g. "Selected date `{0}`"
+     */
+    selectedDateFormatString?: string;
+    /**
+     * Aria-label format string for today's date. Should have 1 string param, e.g. "Today's date `{0}`"
+     */
+    todayDateFormatString?: string;
+    /**
+     * Aria-label for when a date is marked
+     */
+    dayMarkedAriaLabel?: string;
+}
+
+/**
+ * Compare the date parts of two dates
+ * @param date1 - The first date to compare
+ * @param date2 - The second date to compare
+ * @returns A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value
+ * if date1 is later than date2.
+ */
+export declare function compareDatePart(date1: Date, date2: Date): Number;
+
+/**
+ * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.
+ * @returns True if the two dates represent the same date (regardless of time-of-day), false otherwise.
+ */
+export declare function compareDates(date1: Date, date2: Date): boolean;
+
+export declare interface DateFormatting {
+    /**
+     * Get a localized string for a day.
+     */
+    formatDay: (date: Date) => string;
+    /**
+     * Get a localized string for a month.
+     */
+    formatMonth: (date: Date, strings: DateGridStrings) => string;
+    /**
+     * Get a localized string for a year.
+     */
+    formatYear: (date: Date) => string;
+    /**
+     * Get a localized string for a month, day, and year.
+     */
+    formatMonthDayYear: (date: Date, strings: DateGridStrings) => string;
+    /**
+     * Get a localized string for a month and year.
+     */
+    formatMonthYear: (date: Date, strings: DateGridStrings) => string;
+}
+
+export declare interface DateGridStrings {
+    /**
+     * An array of strings for the full names of months.
+     * The array is 0-based, so months[0] should be the full name of January.
+     */
+    months: string[];
+    /**
+     * An array of strings for the short names of months.
+     * The array is 0-based, so shortMonths[0] should be the short name of January.
+     */
+    shortMonths: string[];
+    /**
+     * An array of strings for the full names of days of the week.
+     * The array is 0-based, so days[0] should be the full name of Sunday.
+     */
+    days: string[];
+    /**
+     * An array of strings for the initials of the days of the week.
+     * The array is 0-based, so days[0] should be the initial of Sunday.
+     */
+    shortDays: string[];
+}
+
+export declare const DatePicker: ForwardRefComponent<DatePickerProps>;
+
+export declare const datePickerClassNames: SlotClassNames<DatePickerSlots>;
+
+export declare type DatePickerProps = ComponentProps<Partial<DatePickerSlots>> & {
+    /**
+     * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<IDatePicker>;
+    /**
+     * Callback issued when a date is selected
+     */
+    onSelectDate?: (date: Date | null | undefined) => void;
+    /**
+     * Label for the DatePicker
+     */
+    label?: string;
+    /**
+     * Whether the DatePicker is a required field or not
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Disabled state of the DatePicker.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether or not the Input of the DatePicker is underlined.
+     * @default false
+     */
+    underlined?: boolean;
+    /**
+     * Whether the month picker is shown beside the day picker or hidden.
+     * @default true
+     */
+    isMonthPickerVisible?: boolean;
+    /**
+     * Show month picker on top of date picker when visible.
+     * @default false
+     */
+    showMonthPickerAsOverlay?: boolean;
+    /**
+     * Whether the DatePicker allows input a date string directly or not
+     * @default false
+     */
+    allowTextInput?: boolean;
+    /**
+     * Whether the DatePicker should open automatically when the control is focused
+     * WARNING: setting this to false creates an accessibility violation and is not recommended
+     * @default true
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Whether the DatePicker should open when the input is clicked
+     * @default true
+     */
+    openOnClick?: boolean;
+    /**
+     * Placeholder text for the DatePicker
+     */
+    placeholder?: string;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * Default value of the DatePicker, if any
+     */
+    value?: Date;
+    /**
+     * Optional method to format the chosen date to a string to display in the DatePicker
+     * @default date.toString()
+     */
+    formatDate?: (date?: Date) => string;
+    /**
+     * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true
+     * @default new Date(Date.parse(dateStr))
+     */
+    parseDateFromString?: (dateStr: string) => Date | null;
+    /**
+     * The first day of the week for your locale.
+     * @default DayOfWeek.Sunday
+     */
+    firstDayOfWeek?: DayOfWeek;
+    /**
+     * Localized strings to use in the DatePicker
+     */
+    strings?: DatePickerStrings;
+    /**
+     * Whether the month picker should highlight the current month
+     * @default false
+     */
+    highlightCurrentMonth?: boolean;
+    /**
+     * Whether the month picker should highlight the selected month
+     * @default false
+     */
+    highlightSelectedMonth?: boolean;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     * @default false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
+     * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+     * @default FirstWeekOfYear.FirstFullWeek
+     */
+    firstWeekOfYear?: FirstWeekOfYear;
+    /**
+     * Whether the "Go to today" link should be shown or not
+     */
+    showGoToToday?: boolean;
+    /**
+     * Determines if the DatePicker has a border.
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter?: DateFormatting;
+    /**
+     * The minimum allowable date.
+     */
+    minDate?: Date;
+    /**
+     * The maximum allowable date.
+     */
+    maxDate?: Date;
+    /**
+     * The initially highlighted date.
+     */
+    initialPickerDate?: Date;
+    /**
+     * Allows all elements to be focused, including disabled ones
+     * @default false
+     */
+    allFocusable?: boolean;
+    /**
+     * Callback that runs after DatePicker's menu (Calendar) is closed
+     */
+    onAfterMenuDismiss?: () => void;
+    /**
+     * Whether the CalendarDay close button should be shown or not.
+     */
+    showCloseButton?: boolean;
+    /**
+     * The tabIndex of the Input
+     */
+    tabIndex?: number;
+};
+
+declare type DatePickerSlots = {
+    root: NonNullable<Slot<'div'>>;
+    field: NonNullable<Slot<typeof Field>>;
+    input: NonNullable<Slot<typeof Input>>;
+    wrapper: NonNullable<Slot<'div'>>;
+    popover: NonNullable<Slot<Partial<PopoverProps>>>;
+    popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;
+    calendar: NonNullable<Slot<Partial<CalendarProps>>>;
+};
+
+declare type DatePickerState = ComponentState<DatePickerSlots> & {
+    disabled: boolean;
+    isDatePickerShown: boolean;
+};
+
+export declare interface DatePickerStrings extends CalendarStrings {
+    /**
+     * Error message to render for Input if isRequired validation fails.
+     */
+    isRequiredErrorMessage?: string;
+    /**
+     * Error message to render for Input if input date string parsing fails.
+     */
+    invalidInputErrorMessage?: string;
+    /**
+     * Error message to render for Input if date boundary (minDate, maxDate) validation fails.
+     */
+    isOutOfBoundsErrorMessage?: string;
+    /**
+     * Status message to render for Input the input date parsing fails,
+     * and the typed value is cleared and reset to the previous value.
+     *  e.g. "Invalid entry `{0}`, date reset to `{1}`"
+     */
+    isResetStatusMessage?: string;
+}
+
+/**
+ * The supported date range types
+ */
+export declare enum DateRangeType {
+    Day = 0,
+    Week = 1,
+    Month = 2,
+    WorkWeek = 3
+}
+
+declare interface DayGridOptions extends RestrictedDatesOptions {
+    /**
+     * The first day of the week for your locale.
+     */
+    firstDayOfWeek: DayOfWeek;
+    /**
+     * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
+     * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+     */
+    firstWeekOfYear: FirstWeekOfYear;
+    /**
+     * The date range type indicating how  many days should be selected as the user
+     * selects days
+     */
+    dateRangeType: DateRangeType;
+    /**
+     * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
+     * views.
+     */
+    daysToSelectInDayView?: number;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * The days that are selectable when `dateRangeType` is WorkWeek.
+     * If `dateRangeType` is not WorkWeek this property does nothing.
+     */
+    workWeekDays?: DayOfWeek[];
+    /**
+     * Which days in the generated grid should be marked.
+     */
+    markedDays?: Date[];
+    /**
+     * The currently selected date
+     */
+    selectedDate: Date;
+    /**
+     * The currently navigated date
+     */
+    navigatedDate: Date;
+    /**
+     * How many weeks to show by default. If not provided, will show enough weeks to display the current
+     * month, between 4 and 6 depending
+     */
+    weeksToShow?: number;
+}
+
+/**
+ * The days of the week
+ */
+export declare enum DayOfWeek {
+    Sunday = 0,
+    Monday = 1,
+    Tuesday = 2,
+    Wednesday = 3,
+    Thursday = 4,
+    Friday = 5,
+    Saturday = 6
+}
+
+export declare const DAYS_IN_WEEK = 7;
+
+export declare const defaultCalendarStrings: CalendarStrings;
+
+export declare const defaultDatePickerStrings: DatePickerStrings;
+
+/**
+ * First week of the year settings types
+ */
+export declare enum FirstWeekOfYear {
+    FirstDay = 0,
+    FirstFullWeek = 1,
+    FirstFourDayWeek = 2
+}
+
+/**
+ * Helper function to assist in date comparisons
+ */
+export declare function getDatePartHashValue(date: Date): number;
+
+/**
+ * Gets the date range array including the specified date. The date range array is calculated as the list
+ * of dates accounting for the specified first day of the week and date range type.
+ * @param date - The input date
+ * @param dateRangeType - The desired date range type, i.e., day, week, month, etc.
+ * @param firstDayOfWeek - The first day of the week.
+ * @param workWeekDays - The allowed days in work week. If not provided, assumes all days are allowed.
+ * @param daysToSelectInDayView - The number of days to include when using dateRangeType === DateRangeType.Day
+ * for multiday view. Defaults to 1
+ * @returns An array of dates representing the date range containing the specified date.
+ */
+export declare function getDateRangeArray(date: Date, dateRangeType: DateRangeType, firstDayOfWeek: DayOfWeek, workWeekDays?: DayOfWeek[], daysToSelectInDayView?: number): Date[];
+
+/**
+ * Gets the date for the last day of the week based on the given date assuming
+ * the specified first day of the week.
+ * @param date - The date to find the beginning of the week date for.
+ * @returns A new date object representing the first day of the week containing the input date.
+ */
+export declare function getEndDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date;
+
+/**
+ * Returns a date that is the last day of the month of the provided date.
+ * @param date - The origin date
+ * @returns A new Date object with the day set to the last day of the month.
+ */
+export declare function getMonthEnd(date: Date): Date;
+
+/**
+ * Returns a date that is the first day of the month of the provided date.
+ * @param date - The origin date
+ * @returns A new Date object with the day set to the first day of the month.
+ */
+export declare function getMonthStart(date: Date): Date;
+
+/**
+ * Gets the date for the first day of the week based on the given date assuming
+ * the specified first day of the week.
+ * @param date - The date to find the beginning of the week date for.
+ * @returns A new date object representing the first day of the week containing the input date.
+ */
+export declare function getStartDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date;
+
+/**
+ * Returns the week number for a date.
+ * Week numbers are 1 - 52 (53) in a year
+ * @param date - A date to find the week number for.
+ * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)
+ * @param firstWeekOfYear - The first week of the year (1-2)
+ * @returns The week's number in the year.
+ */
+export declare function getWeekNumber(date: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear): number;
+
+/**
+ * Returns the week number for a date.
+ * Week numbers are 1 - 52 (53) in a year
+ * @param navigatedDate - A date to find the week number for.
+ * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)
+ * @param firstWeekOfYear - The first week of the year (1-2)
+ * @returns The weeks number array for the current month.
+ */
+export declare function getWeekNumbersInMonth(weeksInMonth: number, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear, navigatedDate: Date): number[];
+
+/**
+ * Returns a date that is the last day of the year of the provided date.
+ * @param date - The origin date
+ * @returns A new Date object with the day set to the last day of the year.
+ */
+export declare function getYearEnd(date: Date): Date;
+
+/**
+ * Returns a date that is the first day of the year of the provided date.
+ * @param date - The origin date
+ * @returns A new Date object with the day set to the first day of the year.
+ */
+export declare function getYearStart(date: Date): Date;
+
+export declare interface ICalendar {
+    /** Sets focus to the selected date. */
+    focus: () => void;
+}
+
+export declare interface ICalendarDay {
+    focus(): void;
+}
+
+/**
+ * @internal
+ */
+declare interface ICalendarDayGrid {
+    focus(): void;
+}
+
+export declare interface ICalendarMonth {
+    focus(): void;
+}
+
+export declare interface IDatePicker {
+    /** Sets focus to the text field */
+    focus(): void;
+    /** Reset the state of the picker to the default */
+    reset(): void;
+    /** Open the datepicker callout */
+    showDatePickerPopup(): void;
+}
+
+/**
+ * Checks whether the specified date is in the given date range.
+ * @param date - The origin date
+ * @param dateRange - An array of dates to do the lookup on
+ * @returns True if the date matches one of the dates in the specified array, false otherwise.
+ */
+export declare function isInDateRangeArray(date: Date, dateRange: Date[]): boolean;
+
+/**
+ * The months
+ */
+export declare enum MonthOfYear {
+    January = 0,
+    February = 1,
+    March = 2,
+    April = 3,
+    May = 4,
+    June = 5,
+    July = 6,
+    August = 7,
+    September = 8,
+    October = 9,
+    November = 10,
+    December = 11
+}
+
+/**
+ * Render the final JSX of DatePicker
+ */
+export declare const renderDatePicker_unstable: (state: DatePickerState) => JSX.Element;
+
+declare interface RestrictedDatesOptions {
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * If set the Calendar will not allow selection of dates in this array.
+     */
+    restrictedDates?: Date[];
+}
+
+/**
+ * Returns a date that is a copy of the given date, aside from the month changing to the given month.
+ *  The method tries to preserve the day-of-month; however, if the new month does not have enough days
+ * to contain the original day-of-month, we'll use the last day of the new month.
+ * @param date - The origin date
+ * @param month - The 0-based index of the month to set on the date.
+ * @returns A new Date object with the given month set.
+ */
+export declare function setMonth(date: Date, month: number): Date;
+
+export declare const TimeConstants: {
+    MillisecondsInOneDay: number;
+    MillisecondsIn1Sec: number;
+    MillisecondsIn1Min: number;
+    MillisecondsIn30Mins: number;
+    MillisecondsIn1Hour: number;
+    MinutesInOneDay: number;
+    MinutesInOneHour: number;
+    DaysInOneWeek: number;
+    MonthInOneYear: number;
+    HoursInOneDay: number;
+    SecondsInOneMinute: number;
+    OffsetTo24HourFormat: number;
+    /**
+     * Matches a time string. Groups:
+     * 1. hours (with or without leading 0)
+     * 2. minutes
+     * 3. seconds (optional)
+     * 4. meridiem (am/pm, case-insensitive, optional)
+     */
+    TimeFormatRegex: RegExp;
+};
+
+/**
+ * Create the state required to render DatePicker.
+ *
+ * The returned state can be modified with hooks such as useDatePickerStyles_unstable,
+ * before being passed to renderDatePicker_unstable.
+ *
+ * @param props - props from this instance of DatePicker
+ * @param ref - reference to root HTMLElement of DatePicker
+ */
+export declare const useDatePicker_unstable: (props: DatePickerProps, ref: React_2.Ref<HTMLElement>) => DatePickerState;
+
+/**
+ * Apply styling to the DatePicker slots based on the state
+ */
+export declare const useDatePickerStyles_unstable: (state: DatePickerState) => DatePickerState;
+
+export { }