import { FoundationElement } from '@microsoft/fast-foundation'; import Calendar from './calendar'; import Day from './day'; export declare const foundationDatePickerShadowOptions: ShadowRootInit; export declare const defaultDatePickerConfig: {}; /** * @tagname %%prefix%%-date-picker * * @fires value-changed - Fired when the date is changed in the calendar */ export declare class DatePicker extends FoundationElement { /** * @attr format - date format that will be displayed. * @default 'MM-DD-YYYY * @example * Date picker with day, month, year * ```html * * * ``` */ format: string; formatChanged(oldValue: string, newValue: string): void; lang: string; langChanged(): void; /** * @attr use-locale-format - when true, `format` is set from dayjs locale `L`. * Uses the browser locale (`navigator.language`) unless `lang` is set on the element. * @default false */ useLocaleFormat: boolean; useLocaleFormatChanged(oldValue: boolean, newValue: boolean): void; visible: boolean; /** * @attr inline-calendar - display the calendar beneath the value display. * @default false * @example * Date picker inline and always visible * ```html * * * ``` */ inlineCalendar: boolean; inlineCalendarChanged(): void; /** * @attr hide-weekends - hides the weekend days from the calendar * @default false * @example * Date picker with weekends hidden * ```html * * * ``` */ hideWeekends: boolean; hideWeekendsCalendarChanged(): void; /** * @attr position - positions the calendar picker relative to the input control. * @default bottom * @example * To position the calendar to the right. * ```html * * * ``` */ position: 'bottom' | 'top' | 'left' | 'right'; /** * @attr label - the label that will be displayed next to the date input text field * @example * To add a label with the value "Trade Date" * ```html * * * ``` */ label: string; /** * @attr allow-empty - when true, no initial date is selected; the input shows a placeholder until the user picks a date. * @default false * @example * ```html * * ``` */ allowEmpty: boolean; /** * @attr placeholder - hint shown when allow-empty is set and no date is selected. Defaults from `format` (e.g. DD/MM/YYYY → dd/mm/yyyy). */ placeholder: string; /** * @attr value - sets the value of the date picker * @example * To set a value of January 1st 2025, assuming MM/DD/YYYY date format * ```html * * * ``` */ value: string; valueChanged(oldValue: string, newValue: string): void; /** * @internal */ currentDate: Day; /** * @internal */ currentMonth: string; /** * @internal */ currentYear: number; /** * @internal */ calendarDropdownClasses: string; /** * @internal */ formatDate: string; /** * @internal */ monthList: Day[]; /** * @public disabledDaysOfWeek - an array of numbers disabling days of the week. * Sunday = 1, Monday = 2, Tuesday = 3, Wednesday = 4, Thursday = 5, Friday = 6, Saturday = 7 * @example * To disable Saturday and Sunday. * ```html * * * ``` */ disabledDaysOfWeek: number[]; calendar: Calendar; substringNumber: number; private suppressValueChanged; private cachedFormat; disconnectedCallback(): void; connectedCallback(): void; /** * Clears the selected date (only when `allow-empty` is enabled). * @public */ clear(): void; /** * @internal */ get inputValue(): string; /** * @internal */ get inputPlaceholder(): string; /** * Locale for display format and calendar labels: explicit `lang`, or browser when using locale format. * @internal */ private get effectiveLang(); private applyLocaleFormat; private cacheUserFormat; private restoreUserFormat; private applyEffectiveLangChange; private syncValueAttribute; private initializeEmpty; private initializeWithDefaultDate; private resetToDefaultDate; private applyValue; /** * Resets to the empty/cleared view. * @param emitEvent - emit `value-changed` for user-driven clears (public `clear()`); skip for * host-driven attribute writes since the host is the source of the change. */ private clearToEmpty; updateHeaderText(): void; protected visibleChanged(_prev: boolean, next: boolean): void; private clickOutside; private keydownOutside; private handleKeydownOutside; private handleClickOutside; private closeCalendar; toggleCalendar(): void; toggleVisibility(): void; isSelectedDate(date: any): boolean; isCurrentCalendarMonth(): boolean; prevMonth(): void; nextMonth(): void; selectDay(day: any): void; getMonthDaysGrid(): Day[]; } /** * The Foundation DatePicker * * @public * @remarks * HTML Element: \ */ export declare const foundationDatePicker: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ baseName: string; styles: import("@microsoft/fast-element").ElementStyles; template: import("@microsoft/fast-element").ViewTemplate; shadowOptions: ShadowRootInit; }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ baseName: string; styles: import("@microsoft/fast-element").ElementStyles; template: import("@microsoft/fast-element").ViewTemplate; shadowOptions: ShadowRootInit; }, typeof DatePicker>; //# sourceMappingURL=date-picker.d.ts.map