| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
- import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
- import { PlacementArray } from '../util/positioning';
- import { NgbDateAdapter } from './adapters/ngb-date-adapter';
- import { NgbDatepickerNavigateEvent } from './datepicker';
- import { DayTemplateContext } from './datepicker-day-template-context';
- import { NgbCalendar } from './ngb-calendar';
- import { NgbDate } from './ngb-date';
- import { NgbDateParserFormatter } from './ngb-date-parser-formatter';
- import { NgbDateStruct } from './ngb-date-struct';
- import { NgbInputDatepickerConfig } from './datepicker-input-config';
- /**
- * A directive that allows to stick a datepicker popup to an input field.
- *
- * Manages interaction with the input field itself, does value formatting and provides forms integration.
- */
- export declare class NgbInputDatepicker implements OnChanges, OnDestroy, ControlValueAccessor, Validator {
- private _parserFormatter;
- private _elRef;
- private _vcRef;
- private _renderer;
- private _cfr;
- private _ngZone;
- private _calendar;
- private _dateAdapter;
- private _document;
- private _changeDetector;
- private _cRef;
- private _disabled;
- private _elWithFocus;
- private _model;
- private _inputValue;
- private _zoneSubscription;
- /**
- * Indicates whether the datepicker popup should be closed automatically after date selection / outside click or not.
- *
- * * `true` - the popup will close on both date selection and outside click.
- * * `false` - the popup can only be closed manually via `close()` or `toggle()` methods.
- * * `"inside"` - the popup will close on date selection, but not outside clicks.
- * * `"outside"` - the popup will close only on the outside click and not on date selection/inside clicks.
- *
- * @since 3.0.0
- */
- autoClose: boolean | 'inside' | 'outside';
- /**
- * 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<DayTemplateContext>;
- /**
- * 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<any>;
- /**
- * 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 earliest date that can be displayed or selected. Also used for form validation.
- *
- * If not provided, 'year' select box will display 10 years before the current month.
- */
- minDate: NgbDateStruct;
- /**
- * The latest date that can be displayed or selected. Also used for form validation.
- *
- * If not provided, 'year' select box will display 10 years after the current month.
- */
- maxDate: 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';
- /**
- * The preferred placement of the datepicker popup.
- *
- * Possible values are `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`,
- * `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`,
- * `"right-bottom"`
- *
- * Accepts an array of strings or a string with space separated possible values.
- *
- * The default order of preference is `"bottom-left bottom-right top-left top-right"`
- *
- * Please see the [positioning overview](#/positioning) for more details.
- */
- placement: PlacementArray;
- /**
- * If `true`, when closing datepicker will focus element that was focused before datepicker was opened.
- *
- * Alternatively you could provide a selector or an `HTMLElement` to focus. If the element doesn't exist or invalid,
- * we'll fallback to focus document body.
- *
- * @since 5.2.0
- */
- restoreFocus: true | string | HTMLElement;
- /**
- * 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;
- };
- /**
- * A selector specifying the element the datepicker popup should be appended to.
- *
- * Currently only supports `"body"`.
- */
- container: string;
- /**
- * A css selector or html element specifying the element the datepicker popup should be positioned against.
- *
- * By default the input is used as a target.
- *
- * @since 4.2.0
- */
- positionTarget: string | HTMLElement;
- /**
- * An event emitted when user selects a date using keyboard or mouse.
- *
- * The payload of the event is currently selected `NgbDate`.
- *
- * @since 1.1.1
- */
- dateSelect: EventEmitter<NgbDate>;
- /**
- * Event emitted right after the navigation happens and displayed month changes.
- *
- * See [`NgbDatepickerNavigateEvent`](#/components/datepicker/api#NgbDatepickerNavigateEvent) for the payload info.
- */
- navigate: EventEmitter<NgbDatepickerNavigateEvent>;
- /**
- * An event fired after closing datepicker window.
- *
- * @since 4.2.0
- */
- closed: EventEmitter<void>;
- disabled: any;
- private _onChange;
- private _onTouched;
- private _validatorChange;
- constructor(_parserFormatter: NgbDateParserFormatter, _elRef: ElementRef<HTMLInputElement>, _vcRef: ViewContainerRef, _renderer: Renderer2, _cfr: ComponentFactoryResolver, _ngZone: NgZone, _calendar: NgbCalendar, _dateAdapter: NgbDateAdapter<any>, _document: any, _changeDetector: ChangeDetectorRef, config: NgbInputDatepickerConfig);
- registerOnChange(fn: (value: any) => any): void;
- registerOnTouched(fn: () => any): void;
- registerOnValidatorChange(fn: () => void): void;
- setDisabledState(isDisabled: boolean): void;
- validate(c: AbstractControl): {
- [key: string]: any;
- };
- writeValue(value: any): void;
- manualDateChange(value: string, updateView?: boolean): void;
- isOpen(): boolean;
- /**
- * Opens the datepicker popup.
- *
- * If the related form control contains a valid date, the corresponding month will be opened.
- */
- open(): void;
- /**
- * Closes the datepicker popup.
- */
- close(): void;
- /**
- * Toggles the datepicker popup.
- */
- toggle(): 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;
- onBlur(): void;
- onFocus(): void;
- ngOnChanges(changes: SimpleChanges): void;
- ngOnDestroy(): void;
- private _applyDatepickerInputs;
- private _applyPopupStyling;
- private _subscribeForDatepickerOutputs;
- private _writeModelValue;
- private _fromDateStruct;
- private _updatePopupPosition;
- }
|