1 | import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
|
2 | import { TranslationWidth } from '@angular/common';
|
3 | import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
|
4 | import { PlacementArray } from '../util/positioning';
|
5 | import { Options } from '@popperjs/core';
|
6 | import { NgbDateAdapter } from './adapters/ngb-date-adapter';
|
7 | import { NgbDatepickerNavigateEvent } from './datepicker';
|
8 | import { DayTemplateContext } from './datepicker-day-template-context';
|
9 | import { NgbCalendar } from './ngb-calendar';
|
10 | import { NgbDate } from './ngb-date';
|
11 | import { NgbDateParserFormatter } from './ngb-date-parser-formatter';
|
12 | import { NgbDateStruct } from './ngb-date-struct';
|
13 | import { NgbInputDatepickerConfig } from './datepicker-input-config';
|
14 | import { NgbRTL } from '../util/rtl';
|
15 | import * as i0 from "@angular/core";
|
16 | /**
|
17 | * A directive that allows to stick a datepicker popup to an input field.
|
18 | *
|
19 | * Manages interaction with the input field itself, does value formatting and provides forms integration.
|
20 | */
|
21 | export declare class NgbInputDatepicker implements OnChanges, OnDestroy, ControlValueAccessor, Validator {
|
22 | private _parserFormatter;
|
23 | private _elRef;
|
24 | private _vcRef;
|
25 | private _renderer;
|
26 | private _ngZone;
|
27 | private _calendar;
|
28 | private _dateAdapter;
|
29 | private _document;
|
30 | private _changeDetector;
|
31 | static ngAcceptInputType_autoClose: boolean | string;
|
32 | static ngAcceptInputType_disabled: boolean | '';
|
33 | static ngAcceptInputType_navigation: string;
|
34 | static ngAcceptInputType_outsideDays: string;
|
35 | static ngAcceptInputType_weekdays: boolean | number;
|
36 | private _cRef;
|
37 | private _disabled;
|
38 | private _elWithFocus;
|
39 | private _model;
|
40 | private _inputValue;
|
41 | private _zoneSubscription;
|
42 | private _positioning;
|
43 | private _destroyCloseHandlers$;
|
44 | /**
|
45 | * Indicates whether the datepicker popup should be closed automatically after date selection / outside click or not.
|
46 | *
|
47 | * * `true` - the popup will close on both date selection and outside click.
|
48 | * * `false` - the popup can only be closed manually via `close()` or `toggle()` methods.
|
49 | * * `"inside"` - the popup will close on date selection, but not outside clicks.
|
50 | * * `"outside"` - the popup will close only on the outside click and not on date selection/inside clicks.
|
51 | *
|
52 | * @since 3.0.0
|
53 | */
|
54 | autoClose: boolean | 'inside' | 'outside';
|
55 | /**
|
56 | * An optional class applied to the datepicker popup element.
|
57 | *
|
58 | * @since 9.1.0
|
59 | */
|
60 | datepickerClass: string;
|
61 | /**
|
62 | * The reference to a custom template for the day.
|
63 | *
|
64 | * Allows to completely override the way a day 'cell' in the calendar is displayed.
|
65 | *
|
66 | * See [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext) for the data you get inside.
|
67 | */
|
68 | dayTemplate: TemplateRef<DayTemplateContext>;
|
69 | /**
|
70 | * The callback to pass any arbitrary data to the template cell via the
|
71 | * [`DayTemplateContext`](#/components/datepicker/api#DayTemplateContext)'s `data` parameter.
|
72 | *
|
73 | * `current` is the month that is currently displayed by the datepicker.
|
74 | *
|
75 | * @since 3.3.0
|
76 | */
|
77 | dayTemplateData: (date: NgbDate, current?: {
|
78 | year: number;
|
79 | month: number;
|
80 | }) => any;
|
81 | /**
|
82 | * The number of months to display.
|
83 | */
|
84 | displayMonths: number;
|
85 | /**
|
86 | * The first day of the week.
|
87 | *
|
88 | * With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun.
|
89 | */
|
90 | firstDayOfWeek: number;
|
91 | /**
|
92 | * The reference to the custom template for the datepicker footer.
|
93 | *
|
94 | * @since 3.3.0
|
95 | */
|
96 | footerTemplate: TemplateRef<any>;
|
97 | /**
|
98 | * The callback to mark some dates as disabled.
|
99 | *
|
100 | * It is called for each new date when navigating to a different month.
|
101 | *
|
102 | * `current` is the month that is currently displayed by the datepicker.
|
103 | */
|
104 | markDisabled: (date: NgbDate, current?: {
|
105 | year: number;
|
106 | month: number;
|
107 | }) => boolean;
|
108 | /**
|
109 | * The earliest date that can be displayed or selected. Also used for form validation.
|
110 | *
|
111 | * If not provided, 'year' select box will display 10 years before the current month.
|
112 | */
|
113 | minDate: NgbDateStruct;
|
114 | /**
|
115 | * The latest date that can be displayed or selected. Also used for form validation.
|
116 | *
|
117 | * If not provided, 'year' select box will display 10 years after the current month.
|
118 | */
|
119 | maxDate: NgbDateStruct;
|
120 | /**
|
121 | * Navigation type.
|
122 | *
|
123 | * * `"select"` - select boxes for month and navigation arrows
|
124 | * * `"arrows"` - only navigation arrows
|
125 | * * `"none"` - no navigation visible at all
|
126 | */
|
127 | navigation: 'select' | 'arrows' | 'none';
|
128 | /**
|
129 | * The way of displaying days that don't belong to the current month.
|
130 | *
|
131 | * * `"visible"` - days are visible
|
132 | * * `"hidden"` - days are hidden, white space preserved
|
133 | * * `"collapsed"` - days are collapsed, so the datepicker height might change between months
|
134 | *
|
135 | * For the 2+ months view, days in between months are never shown.
|
136 | */
|
137 | outsideDays: 'visible' | 'collapsed' | 'hidden';
|
138 | /**
|
139 | * The preferred placement of the datepicker popup, among the [possible values](#/guides/positioning#api).
|
140 | *
|
141 | * The default order of preference is `"bottom-start bottom-end top-start top-end"`
|
142 | *
|
143 | * Please see the [positioning overview](#/positioning) for more details.
|
144 | */
|
145 | placement: PlacementArray;
|
146 | /**
|
147 | * Allows to change default Popper options when positioning the popup.
|
148 | * Receives current popper options and returns modified ones.
|
149 | *
|
150 | * @since 13.1.0
|
151 | */
|
152 | popperOptions: (options: Partial<Options>) => Partial<Options>;
|
153 | /**
|
154 | * If `true`, when closing datepicker will focus element that was focused before datepicker was opened.
|
155 | *
|
156 | * Alternatively you could provide a selector or an `HTMLElement` to focus. If the element doesn't exist or invalid,
|
157 | * we'll fallback to focus document body.
|
158 | *
|
159 | * @since 5.2.0
|
160 | */
|
161 | restoreFocus: true | string | HTMLElement;
|
162 | /**
|
163 | * If `true`, week numbers will be displayed.
|
164 | */
|
165 | showWeekNumbers: boolean;
|
166 | /**
|
167 | * The date to open calendar with.
|
168 | *
|
169 | * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
|
170 | * If nothing or invalid date is provided, calendar will open with current month.
|
171 | *
|
172 | * You could use `navigateTo(date)` method as an alternative.
|
173 | */
|
174 | startDate: {
|
175 | year: number;
|
176 | month: number;
|
177 | day?: number;
|
178 | };
|
179 | /**
|
180 | * A selector specifying the element the datepicker popup should be appended to.
|
181 | *
|
182 | * Currently only supports `"body"`.
|
183 | */
|
184 | container: string;
|
185 | /**
|
186 | * A css selector or html element specifying the element the datepicker popup should be positioned against.
|
187 | *
|
188 | * By default the input is used as a target.
|
189 | *
|
190 | * @since 4.2.0
|
191 | */
|
192 | positionTarget: string | HTMLElement;
|
193 | /**
|
194 | * The way weekdays should be displayed.
|
195 | *
|
196 | * * `true` - weekdays are displayed using default width
|
197 | * * `false` - weekdays are not displayed
|
198 | * * `TranslationWidth` - weekdays are displayed using specified width
|
199 | *
|
200 | * @since 9.1.0
|
201 | */
|
202 | weekdays: TranslationWidth | boolean;
|
203 | /**
|
204 | * An event emitted when user selects a date using keyboard or mouse.
|
205 | *
|
206 | * The payload of the event is currently selected `NgbDate`.
|
207 | *
|
208 | * @since 1.1.1
|
209 | */
|
210 | dateSelect: EventEmitter<NgbDate>;
|
211 | /**
|
212 | * Event emitted right after the navigation happens and displayed month changes.
|
213 | *
|
214 | * See [`NgbDatepickerNavigateEvent`](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info.
|
215 | */
|
216 | navigate: EventEmitter<NgbDatepickerNavigateEvent>;
|
217 | /**
|
218 | * An event fired after closing datepicker window.
|
219 | *
|
220 | * @since 4.2.0
|
221 | */
|
222 | closed: EventEmitter<void>;
|
223 | get disabled(): any;
|
224 | set disabled(value: any);
|
225 | private _onChange;
|
226 | private _onTouched;
|
227 | private _validatorChange;
|
228 | constructor(_parserFormatter: NgbDateParserFormatter, _elRef: ElementRef<HTMLInputElement>, _vcRef: ViewContainerRef, _renderer: Renderer2, _ngZone: NgZone, _calendar: NgbCalendar, _dateAdapter: NgbDateAdapter<any>, rtl: NgbRTL, _document: any, _changeDetector: ChangeDetectorRef, config: NgbInputDatepickerConfig);
|
229 | registerOnChange(fn: (value: any) => any): void;
|
230 | registerOnTouched(fn: () => any): void;
|
231 | registerOnValidatorChange(fn: () => void): void;
|
232 | setDisabledState(isDisabled: boolean): void;
|
233 | validate(c: AbstractControl): ValidationErrors | null;
|
234 | writeValue(value: any): void;
|
235 | manualDateChange(value: string, updateView?: boolean): void;
|
236 | isOpen(): boolean;
|
237 | /**
|
238 | * Opens the datepicker popup.
|
239 | *
|
240 | * If the related form control contains a valid date, the corresponding month will be opened.
|
241 | */
|
242 | open(): void;
|
243 | /**
|
244 | * Closes the datepicker popup.
|
245 | */
|
246 | close(): void;
|
247 | /**
|
248 | * Toggles the datepicker popup.
|
249 | */
|
250 | toggle(): void;
|
251 | /**
|
252 | * Navigates to the provided date.
|
253 | *
|
254 | * With the default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
|
255 | * If nothing or invalid date provided calendar will open current month.
|
256 | *
|
257 | * Use the `[startDate]` input as an alternative.
|
258 | */
|
259 | navigateTo(date?: {
|
260 | year: number;
|
261 | month: number;
|
262 | day?: number;
|
263 | }): void;
|
264 | onBlur(): void;
|
265 | onFocus(): void;
|
266 | ngOnChanges(changes: SimpleChanges): void;
|
267 | ngOnDestroy(): void;
|
268 | private _applyDatepickerInputs;
|
269 | private _applyPopupClass;
|
270 | private _applyPopupStyling;
|
271 | private _subscribeForDatepickerOutputs;
|
272 | private _writeModelValue;
|
273 | private _fromDateStruct;
|
274 | private _setCloseHandlers;
|
275 | static ɵfac: i0.ɵɵFactoryDeclaration<NgbInputDatepicker, never>;
|
276 | static ɵdir: i0.ɵɵDirectiveDeclaration<NgbInputDatepicker, "input[ngbDatepicker]", ["ngbDatepicker"], { "autoClose": "autoClose"; "datepickerClass": "datepickerClass"; "dayTemplate": "dayTemplate"; "dayTemplateData": "dayTemplateData"; "displayMonths": "displayMonths"; "firstDayOfWeek": "firstDayOfWeek"; "footerTemplate": "footerTemplate"; "markDisabled": "markDisabled"; "minDate": "minDate"; "maxDate": "maxDate"; "navigation": "navigation"; "outsideDays": "outsideDays"; "placement": "placement"; "popperOptions": "popperOptions"; "restoreFocus": "restoreFocus"; "showWeekNumbers": "showWeekNumbers"; "startDate": "startDate"; "container": "container"; "positionTarget": "positionTarget"; "weekdays": "weekdays"; "disabled": "disabled"; }, { "dateSelect": "dateSelect"; "navigate": "navigate"; "closed": "closed"; }, never, never, false>;
|
277 | }
|