import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { NgbCalendar } from './ngb-calendar'; import { NgbDate } from './ngb-date'; import { NgbDatepickerService } from './datepicker-service'; import { NgbDatepickerKeyboardService } from './datepicker-keyboard-service'; import { DatepickerViewModel, NavigationEvent } from './datepicker-view-model'; import { DayTemplateContext } from './datepicker-day-template-context'; import { NgbDatepickerConfig } from './datepicker-config'; import { NgbDateAdapter } from './adapters/ngb-date-adapter'; import { NgbDateStruct } from './ngb-date-struct'; import { NgbDatepickerI18n } from './datepicker-i18n'; /** * An event emitted right before the navigation happens and the month displayed by the datepicker changes. */ export interface NgbDatepickerNavigateEvent { /** * The currently displayed month. */ current: { year: number; month: number; }; /** * The month we're navigating to. */ next: { year: number; month: number; }; /** * Calling this function will prevent navigation from happening. * * @since 4.1.0 */ preventDefault: () => void; } /** * An interface that represents the readonly public state of the datepicker. * * Accessible via the `datepicker.state` getter * * @since 5.2.0 */ export interface NgbDatepickerState { /** * The earliest date that can be displayed or selected */ readonly minDate: NgbDate; /** * The latest date that can be displayed or selected */ readonly maxDate: NgbDate; /** * The first visible date of currently displayed months */ readonly firstDate: NgbDate; /** * The last visible date of currently displayed months */ readonly lastDate: NgbDate; /** * The date currently focused by the datepicker */ readonly focusedDate: NgbDate; } /** * A highly configurable component that helps you with selecting calendar dates. * * `NgbDatepicker` is meant to be displayed inline on a page or put inside a popup. */ export declare class NgbDatepicker implements OnDestroy, OnChanges, OnInit, AfterViewInit, ControlValueAccessor { private _service; private _calendar; i18n: NgbDatepickerI18n; private _keyboardService; private _elementRef; private _ngbDateAdapter; private _ngZone; model: DatepickerViewModel; private _monthsEl; private _controlValue; private _destroyed$; private _publicState; /** * The reference to a custom template for the day. * * Allows to completely override the way a day 'cell' in the calendar is displayed. * * See [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext) for the data you get inside. */ dayTemplate: TemplateRef; /** * The callback to pass any arbitrary data to the template cell via the * [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext)'s `data` parameter. * * `current` is the month that is currently displayed by the datepicker. * * @since 3.3.0 */ dayTemplateData: (date: NgbDate, current: { year: number; month: number; }) => any; /** * The number of months to display. */ displayMonths: number; /** * The first day of the week. * * With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun. */ firstDayOfWeek: number; /** * The reference to the custom template for the datepicker footer. * * @since 3.3.0 */ footerTemplate: TemplateRef; /** * The callback to mark some dates as disabled. * * It is called for each new date when navigating to a different month. * * `current` is the month that is currently displayed by the datepicker. */ markDisabled: (date: NgbDate, current: { year: number; month: number; }) => boolean; /** * The latest date that can be displayed or selected. * * If not provided, 'year' select box will display 10 years after the current month. */ maxDate: NgbDateStruct; /** * The earliest date that can be displayed or selected. * * If not provided, 'year' select box will display 10 years before the current month. */ minDate: NgbDateStruct; /** * Navigation type. * * * `"select"` - select boxes for month and navigation arrows * * `"arrows"` - only navigation arrows * * `"none"` - no navigation visible at all */ navigation: 'select' | 'arrows' | 'none'; /** * The way of displaying days that don't belong to the current month. * * * `"visible"` - days are visible * * `"hidden"` - days are hidden, white space preserved * * `"collapsed"` - days are collapsed, so the datepicker height might change between months * * For the 2+ months view, days in between months are never shown. */ outsideDays: 'visible' | 'collapsed' | 'hidden'; /** * If `true`, weekdays will be displayed. */ showWeekdays: boolean; /** * If `true`, week numbers will be displayed. */ showWeekNumbers: boolean; /** * The date to open calendar with. * * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec. * If nothing or invalid date is provided, calendar will open with current month. * * You could use `navigateTo(date)` method as an alternative. */ startDate: { year: number; month: number; day?: number; }; /** * An event emitted right before the navigation happens and displayed month changes. * * See [`NgbDatepickerNavigateEvent`](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info. */ navigate: EventEmitter; /** * An event emitted when user selects a date using keyboard or mouse. * * The payload of the event is currently selected `NgbDate`. * * @since 5.2.0 */ dateSelect: EventEmitter; /** * An event emitted when user selects a date using keyboard or mouse. * * The payload of the event is currently selected `NgbDate`. * * Please use 'dateSelect' output instead, this will be deprecated in version 6.0 due to collision with native * 'select' event. */ select: EventEmitter; onChange: (_: any) => void; onTouched: () => void; constructor(_service: NgbDatepickerService, _calendar: NgbCalendar, i18n: NgbDatepickerI18n, config: NgbDatepickerConfig, _keyboardService: NgbDatepickerKeyboardService, cd: ChangeDetectorRef, _elementRef: ElementRef, _ngbDateAdapter: NgbDateAdapter, _ngZone: NgZone); /** * Returns the readonly public state of the datepicker * * @since 5.2.0 */ readonly state: NgbDatepickerState; /** * Focuses on given date. */ focusDate(date: NgbDateStruct): void; /** * Selects focused date. */ focusSelect(): void; focus(): void; /** * Navigates to the provided date. * * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec. * If nothing or invalid date provided calendar will open current month. * * Use the `[startDate]` input as an alternative. */ navigateTo(date?: { year: number; month: number; day?: number; }): void; ngAfterViewInit(): void; ngOnDestroy(): void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; onDateSelect(date: NgbDate): void; onKeyDown(event: KeyboardEvent): void; onNavigateDateSelect(date: NgbDate): void; onNavigateEvent(event: NavigationEvent): void; registerOnChange(fn: (value: any) => any): void; registerOnTouched(fn: () => any): void; setDisabledState(disabled: boolean): void; writeValue(value: any): void; }