import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { TranslationWidth } from '@angular/common'; import { NgbCalendar } from './ngb-calendar'; import { NgbDate } from './ngb-date'; import { NgbDatepickerService } from './datepicker-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; } | null; /** * 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 | null; /** * The latest date that can be displayed or selected */ readonly maxDate: NgbDate | null; /** * 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; /** * First dates of months currently displayed by the datepicker * * @since 5.3.0 */ readonly months: NgbDate[]; } /** * A directive that marks the content template that customizes the way datepicker months are displayed * * @since 5.3.0 */ export declare class NgbDatepickerContent { templateRef: TemplateRef; constructor(templateRef: TemplateRef); } /** * 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, ControlValueAccessor { private _service; private _calendar; i18n: NgbDatepickerI18n; private _elementRef; private _ngbDateAdapter; private _ngZone; static ngAcceptInputType_autoClose: boolean | string; static ngAcceptInputType_navigation: string; static ngAcceptInputType_outsideDays: string; static ngAcceptInputType_weekdays: boolean | number; model: DatepickerViewModel; private _defaultDayTemplate; private _contentEl; contentTemplate: NgbDatepickerContent; 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`, 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; }; /** * The way weekdays should be displayed. * * * `true` - weekdays are displayed using default width * * `false` - weekdays are not displayed * * `TranslationWidth` - weekdays are displayed using specified width * * @since 9.1.0 */ weekdays: TranslationWidth | boolean; /** * 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; onChange: (_: any) => void; onTouched: () => void; constructor(_service: NgbDatepickerService, _calendar: NgbCalendar, i18n: NgbDatepickerI18n, config: NgbDatepickerConfig, cd: ChangeDetectorRef, _elementRef: ElementRef, _ngbDateAdapter: NgbDateAdapter, _ngZone: NgZone); /** * Returns the readonly public state of the datepicker * * @since 5.2.0 */ get state(): NgbDatepickerState; /** * Returns the calendar service used in the specific datepicker instance. * * @since 5.3.0 */ get calendar(): NgbCalendar; /** * Focuses on given date. */ focusDate(date?: NgbDateStruct | null): 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; 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; }