1 | import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
|
2 | import { ControlValueAccessor } from '@angular/forms';
|
3 | import { TranslationWidth } from '@angular/common';
|
4 | import { NgbCalendar } from './ngb-calendar';
|
5 | import { NgbDate } from './ngb-date';
|
6 | import { NgbDatepickerService } from './datepicker-service';
|
7 | import { DatepickerViewModel, NavigationEvent } from './datepicker-view-model';
|
8 | import { DayTemplateContext } from './datepicker-day-template-context';
|
9 | import { NgbDatepickerConfig } from './datepicker-config';
|
10 | import { NgbDateAdapter } from './adapters/ngb-date-adapter';
|
11 | import { NgbDateStruct } from './ngb-date-struct';
|
12 | import { NgbDatepickerI18n } from './datepicker-i18n';
|
13 | /**
|
14 | * An event emitted right before the navigation happens and the month displayed by the datepicker changes.
|
15 | */
|
16 | export interface NgbDatepickerNavigateEvent {
|
17 | /**
|
18 | * The currently displayed month.
|
19 | */
|
20 | current: {
|
21 | year: number;
|
22 | month: number;
|
23 | } | null;
|
24 | /**
|
25 | * The month we're navigating to.
|
26 | */
|
27 | next: {
|
28 | year: number;
|
29 | month: number;
|
30 | };
|
31 | /**
|
32 | * Calling this function will prevent navigation from happening.
|
33 | *
|
34 | * @since 4.1.0
|
35 | */
|
36 | preventDefault: () => void;
|
37 | }
|
38 | /**
|
39 | * An interface that represents the readonly public state of the datepicker.
|
40 | *
|
41 | * Accessible via the `datepicker.state` getter
|
42 | *
|
43 | * @since 5.2.0
|
44 | */
|
45 | export interface NgbDatepickerState {
|
46 | /**
|
47 | * The earliest date that can be displayed or selected
|
48 | */
|
49 | readonly minDate: NgbDate | null;
|
50 | /**
|
51 | * The latest date that can be displayed or selected
|
52 | */
|
53 | readonly maxDate: NgbDate | null;
|
54 | /**
|
55 | * The first visible date of currently displayed months
|
56 | */
|
57 | readonly firstDate: NgbDate;
|
58 | /**
|
59 | * The last visible date of currently displayed months
|
60 | */
|
61 | readonly lastDate: NgbDate;
|
62 | /**
|
63 | * The date currently focused by the datepicker
|
64 | */
|
65 | readonly focusedDate: NgbDate;
|
66 | /**
|
67 | * First dates of months currently displayed by the datepicker
|
68 | *
|
69 | * @since 5.3.0
|
70 | */
|
71 | readonly months: NgbDate[];
|
72 | }
|
73 | /**
|
74 | * A directive that marks the content template that customizes the way datepicker months are displayed
|
75 | *
|
76 | * @since 5.3.0
|
77 | */
|
78 | export declare class NgbDatepickerContent {
|
79 | templateRef: TemplateRef<any>;
|
80 | constructor(templateRef: TemplateRef<any>);
|
81 | }
|
82 | /**
|
83 | * A highly configurable component that helps you with selecting calendar dates.
|
84 | *
|
85 | * `NgbDatepicker` is meant to be displayed inline on a page or put inside a popup.
|
86 | */
|
87 | export declare class NgbDatepicker implements OnDestroy, OnChanges, OnInit, ControlValueAccessor {
|
88 | private _service;
|
89 | private _calendar;
|
90 | i18n: NgbDatepickerI18n;
|
91 | private _elementRef;
|
92 | private _ngbDateAdapter;
|
93 | private _ngZone;
|
94 | static ngAcceptInputType_autoClose: boolean | string;
|
95 | static ngAcceptInputType_navigation: string;
|
96 | static ngAcceptInputType_outsideDays: string;
|
97 | static ngAcceptInputType_weekdays: boolean | number;
|
98 | model: DatepickerViewModel;
|
99 | private _defaultDayTemplate;
|
100 | private _contentEl;
|
101 | contentTemplate: NgbDatepickerContent;
|
102 | private _controlValue;
|
103 | private _destroyed$;
|
104 | private _publicState;
|
105 | /**
|
106 | * The reference to a custom template for the day.
|
107 | *
|
108 | * Allows to completely override the way a day 'cell' in the calendar is displayed.
|
109 | *
|
110 | * See [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext) for the data you get inside.
|
111 | */
|
112 | dayTemplate: TemplateRef<DayTemplateContext>;
|
113 | /**
|
114 | * The callback to pass any arbitrary data to the template cell via the
|
115 | * [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext)'s `data` parameter.
|
116 | *
|
117 | * `current` is the month that is currently displayed by the datepicker.
|
118 | *
|
119 | * @since 3.3.0
|
120 | */
|
121 | dayTemplateData: (date: NgbDate, current?: {
|
122 | year: number;
|
123 | month: number;
|
124 | }) => any;
|
125 | /**
|
126 | * The number of months to display.
|
127 | */
|
128 | displayMonths: number;
|
129 | /**
|
130 | * The first day of the week.
|
131 | *
|
132 | * With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun.
|
133 | */
|
134 | firstDayOfWeek: number;
|
135 | /**
|
136 | * The reference to the custom template for the datepicker footer.
|
137 | *
|
138 | * @since 3.3.0
|
139 | */
|
140 | footerTemplate: TemplateRef<any>;
|
141 | /**
|
142 | * The callback to mark some dates as disabled.
|
143 | *
|
144 | * It is called for each new date when navigating to a different month.
|
145 | *
|
146 | * `current` is the month that is currently displayed by the datepicker.
|
147 | */
|
148 | markDisabled: (date: NgbDate, current?: {
|
149 | year: number;
|
150 | month: number;
|
151 | }) => boolean;
|
152 | /**
|
153 | * The latest date that can be displayed or selected.
|
154 | *
|
155 | * If not provided, 'year' select box will display 10 years after the current month.
|
156 | */
|
157 | maxDate: NgbDateStruct;
|
158 | /**
|
159 | * The earliest date that can be displayed or selected.
|
160 | *
|
161 | * If not provided, 'year' select box will display 10 years before the current month.
|
162 | */
|
163 | minDate: NgbDateStruct;
|
164 | /**
|
165 | * Navigation type.
|
166 | *
|
167 | * * `"select"` - select boxes for month and navigation arrows
|
168 | * * `"arrows"` - only navigation arrows
|
169 | * * `"none"` - no navigation visible at all
|
170 | */
|
171 | navigation: 'select' | 'arrows' | 'none';
|
172 | /**
|
173 | * The way of displaying days that don't belong to the current month.
|
174 | *
|
175 | * * `"visible"` - days are visible
|
176 | * * `"hidden"` - days are hidden, white space preserved
|
177 | * * `"collapsed"` - days are collapsed, so the datepicker height might change between months
|
178 | *
|
179 | * For the 2+ months view, days in between months are never shown.
|
180 | */
|
181 | outsideDays: 'visible' | 'collapsed' | 'hidden';
|
182 | /**
|
183 | * If `true`, week numbers will be displayed.
|
184 | */
|
185 | showWeekNumbers: boolean;
|
186 | /**
|
187 | * The date to open calendar with.
|
188 | *
|
189 | * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
|
190 | * If nothing or invalid date is provided, calendar will open with current month.
|
191 | *
|
192 | * You could use `navigateTo(date)` method as an alternative.
|
193 | */
|
194 | startDate: {
|
195 | year: number;
|
196 | month: number;
|
197 | day?: number;
|
198 | };
|
199 | /**
|
200 | * The way weekdays should be displayed.
|
201 | *
|
202 | * * `true` - weekdays are displayed using default width
|
203 | * * `false` - weekdays are not displayed
|
204 | * * `TranslationWidth` - weekdays are displayed using specified width
|
205 | *
|
206 | * @since 9.1.0
|
207 | */
|
208 | weekdays: TranslationWidth | boolean;
|
209 | /**
|
210 | * An event emitted right before the navigation happens and displayed month changes.
|
211 | *
|
212 | * See [`NgbDatepickerNavigateEvent`](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info.
|
213 | */
|
214 | navigate: EventEmitter<NgbDatepickerNavigateEvent>;
|
215 | /**
|
216 | * An event emitted when user selects a date using keyboard or mouse.
|
217 | *
|
218 | * The payload of the event is currently selected `NgbDate`.
|
219 | *
|
220 | * @since 5.2.0
|
221 | */
|
222 | dateSelect: EventEmitter<NgbDate>;
|
223 | onChange: (_: any) => void;
|
224 | onTouched: () => void;
|
225 | constructor(_service: NgbDatepickerService, _calendar: NgbCalendar, i18n: NgbDatepickerI18n, config: NgbDatepickerConfig, cd: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngbDateAdapter: NgbDateAdapter<any>, _ngZone: NgZone);
|
226 | /**
|
227 | * Returns the readonly public state of the datepicker
|
228 | *
|
229 | * @since 5.2.0
|
230 | */
|
231 | get state(): NgbDatepickerState;
|
232 | /**
|
233 | * Returns the calendar service used in the specific datepicker instance.
|
234 | *
|
235 | * @since 5.3.0
|
236 | */
|
237 | get calendar(): NgbCalendar;
|
238 | /**
|
239 | * Focuses on given date.
|
240 | */
|
241 | focusDate(date?: NgbDateStruct | null): void;
|
242 | /**
|
243 | * Selects focused date.
|
244 | */
|
245 | focusSelect(): void;
|
246 | focus(): void;
|
247 | /**
|
248 | * Navigates to the provided date.
|
249 | *
|
250 | * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
|
251 | * If nothing or invalid date provided calendar will open current month.
|
252 | *
|
253 | * Use the `[startDate]` input as an alternative.
|
254 | */
|
255 | navigateTo(date?: {
|
256 | year: number;
|
257 | month: number;
|
258 | day?: number;
|
259 | }): void;
|
260 | ngAfterViewInit(): void;
|
261 | ngOnDestroy(): void;
|
262 | ngOnInit(): void;
|
263 | ngOnChanges(changes: SimpleChanges): void;
|
264 | onDateSelect(date: NgbDate): void;
|
265 | onNavigateDateSelect(date: NgbDate): void;
|
266 | onNavigateEvent(event: NavigationEvent): void;
|
267 | registerOnChange(fn: (value: any) => any): void;
|
268 | registerOnTouched(fn: () => any): void;
|
269 | setDisabledState(disabled: boolean): void;
|
270 | writeValue(value: any): void;
|
271 | }
|