datepicker-input.d.ts 8.9 KB

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