datetime.d.ts 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer } from '@angular/core';
  2. import { ControlValueAccessor } from '@angular/forms';
  3. import { Config } from '../../config/config';
  4. import { Picker } from '../picker/picker';
  5. import { PickerController } from '../picker/picker-controller';
  6. import { Form } from '../../util/form';
  7. import { BaseInput } from '../../util/base-input';
  8. import { Item } from '../item/item';
  9. import { DateTimeData, LocaleData } from '../../util/datetime-util';
  10. /**
  11. * @name DateTime
  12. * @description
  13. * The DateTime component is used to present an interface which makes it easy for
  14. * users to select dates and times. Tapping on `<ion-datetime>` will display a picker
  15. * interface that slides up from the bottom of the page. The picker then displays
  16. * scrollable columns that can be used to individually select years, months, days,
  17. * hours and minute values. The DateTime component is similar to the native
  18. * `<input type="datetime-local">` element, however, Ionic's DateTime component makes
  19. * it easy to display the date and time in a preferred format, and manage the datetime
  20. * values.
  21. *
  22. * ```html
  23. * <ion-item>
  24. * <ion-label>Date</ion-label>
  25. * <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
  26. * </ion-item>
  27. * ```
  28. *
  29. *
  30. * ## Display and Picker Formats
  31. *
  32. * The DateTime component displays the values in two places: in the `<ion-datetime>`
  33. * component, and in the interface that is presented from the bottom of the screen.
  34. * The following chart lists all of the formats that can be used.
  35. *
  36. * | Format | Description | Example |
  37. * |---------|--------------------------------|-------------------------|
  38. * | `YYYY` | Year, 4 digits | `2018` |
  39. * | `YY` | Year, 2 digits | `18` |
  40. * | `M` | Month | `1` ... `12` |
  41. * | `MM` | Month, leading zero | `01` ... `12` |
  42. * | `MMM` | Month, short name | `Jan` |
  43. * | `MMMM` | Month, full name | `January` |
  44. * | `D` | Day | `1` ... `31` |
  45. * | `DD` | Day, leading zero | `01` ... `31` |
  46. * | `DDD` | Day, short name | `Fri` |
  47. * | `DDDD` | Day, full name | `Friday` |
  48. * | `H` | Hour, 24-hour | `0` ... `23` |
  49. * | `HH` | Hour, 24-hour, leading zero | `00` ... `23` |
  50. * | `h` | Hour, 12-hour | `1` ... `12` |
  51. * | `hh` | Hour, 12-hour, leading zero | `01` ... `12` |
  52. * | `a` | 12-hour time period, lowercase | `am` `pm` |
  53. * | `A` | 12-hour time period, uppercase | `AM` `PM` |
  54. * | `m` | Minute | `1` ... `59` |
  55. * | `mm` | Minute, leading zero | `01` ... `59` |
  56. * | `s` | Second | `1` ... `59` |
  57. * | `ss` | Second, leading zero | `01` ... `59` |
  58. * | `Z` | UTC Timezone Offset | `Z or +HH:mm or -HH:mm` |
  59. *
  60. * **Important**: See the [Month Names and Day of the Week Names](#month-names-and-day-of-the-week-names)
  61. * section below on how to use different names for the month and day.
  62. *
  63. * ### Display Format
  64. *
  65. * The `displayFormat` input property specifies how a datetime's value should be
  66. * printed, as formatted text, within the `ion-datetime` component.
  67. *
  68. * In the following example, the display in the `<ion-datetime>` will use the
  69. * month's short name, the numerical day with a leading zero, a comma and the
  70. * four-digit year. In addition to the date, it will display the time with the hours
  71. * in the 24-hour format and the minutes. Any character can be used as a separator.
  72. * An example display using this format is: `Jun 17, 2005 11:06`.
  73. *
  74. * ```html
  75. * <ion-item>
  76. * <ion-label>Date</ion-label>
  77. * <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
  78. * </ion-item>
  79. * ```
  80. *
  81. * ### Picker Format
  82. *
  83. * The `pickerFormat` input property determines which columns should be shown in the
  84. * interface, the order of the columns, and which format to use within each column.
  85. * If the `pickerFormat` input is not provided then it will default to the `displayFormat`.
  86. *
  87. * In the following example, the display in the `<ion-datetime>` will use the
  88. * `MM/YYYY` format, such as `06/2020`. However, the picker interface
  89. * will display two columns with the month's long name, and the four-digit year.
  90. *
  91. * ```html
  92. * <ion-item>
  93. * <ion-label>Date</ion-label>
  94. * <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
  95. * </ion-item>
  96. * ```
  97. *
  98. * ### Datetime Data
  99. *
  100. * Historically, handling datetime values within JavaScript, or even within HTML
  101. * inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
  102. * notoriously difficult to correctly parse apart datetime strings or to format
  103. * datetime values. Even worse is how different browsers and JavaScript versions
  104. * parse various datetime strings differently, especially per locale.
  105. *
  106. * But no worries, all is not lost! Ionic's datetime input has been designed so
  107. * developers can avoid the common pitfalls, allowing developers to easily format
  108. * datetime values within the input, and give the user a simple datetime picker for a
  109. * great user experience.
  110. *
  111. * ##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
  112. *
  113. * Ionic uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
  114. * for its value. The value is simply a string, rather than using JavaScript's `Date`
  115. * object. Additionally, when using the ISO datetime format, it makes it easier
  116. * to serialize and pass within JSON objects, and sending databases a standardized
  117. * format which it can be easily parsed if need be.
  118. *
  119. * To create an ISO datetime string for the current date and time, e.g. use `const currentDate = (new Date()).toISOString();`.
  120. *
  121. * An ISO format can be used as a simple year, or just the hour and minute, or get more
  122. * detailed down to the millisecond and timezone. Any of the ISO formats below can be used,
  123. * and after a user selects a new value, Ionic will continue to use the same ISO format
  124. * which datetime value was originally given as.
  125. *
  126. * | Description | Format | Datetime Value Example |
  127. * |----------------------|------------------------|------------------------------|
  128. * | Year | YYYY | 1994 |
  129. * | Year and Month | YYYY-MM | 1994-12 |
  130. * | Complete Date | YYYY-MM-DD | 1994-12-15 |
  131. * | Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
  132. * | UTC Timezone | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789Z |
  133. * | Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789+5:00 |
  134. * | Hour and Minute | HH:mm | 13:47 |
  135. * | Hour, Minute, Second | HH:mm:ss | 13:47:20 |
  136. *
  137. * Note that the year is always four-digits, milliseconds (if it's added) is always
  138. * three-digits, and all others are always two-digits. So the number representing
  139. * January always has a leading zero, such as `01`. Additionally, the hour is always
  140. * in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means `1pm`,
  141. * and `23` means `11pm`.
  142. *
  143. * It's also important to note that neither the `displayFormat` or `pickerFormat` can
  144. * set the datetime value's output, which is the value that is set by the component's
  145. * `ngModel`. The format's are merely for displaying the value as text and the picker's
  146. * interface, but the datetime's value is always persisted as a valid ISO 8601 datetime
  147. * string.
  148. *
  149. *
  150. * ## Min and Max Datetimes
  151. *
  152. * Dates are infinite in either direction, so for a user's selection there should be at
  153. * least some form of restricting the dates that can be selected. By default, the maximum
  154. * date is to the end of the current year, and the minimum date is from the beginning
  155. * of the year that was 100 years ago.
  156. *
  157. * To customize the minimum and maximum datetime values, the `min` and `max` component
  158. * inputs can be provided which may make more sense for the app's use-case, rather
  159. * than the default of the last 100 years. Following the same IS0 8601 format listed
  160. * in the table above, each component can restrict which dates can be selected by the
  161. * user. Below is an example of restricting the date selection between the beginning
  162. * of 2016, and October 31st of 2020:
  163. *
  164. * ```html
  165. * <ion-item>
  166. * <ion-label>Date</ion-label>
  167. * <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
  168. * </ion-datetime>
  169. * </ion-item>
  170. * ```
  171. *
  172. *
  173. * ## Month Names and Day of the Week Names
  174. *
  175. * At this time, there is no one-size-fits-all standard to automatically choose the correct
  176. * language/spelling for a month name, or day of the week name, depending on the language
  177. * or locale. Good news is that there is an
  178. * [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
  179. * standard which *most* browsers have adopted. However, at this time the standard has not
  180. * been fully implemented by all popular browsers so Ionic is unavailable to take advantage
  181. * of it *yet*. Additionally, Angular also provides an internationalization service, but it
  182. * is still under heavy development so Ionic does not depend on it at this time.
  183. *
  184. * All things considered, the by far easiest solution is to just provide an array of names
  185. * if the app needs to use names other than the default English version of month and day
  186. * names. The month names and day names can be either configured at the app level, or
  187. * individual `ion-datetime` level.
  188. *
  189. * ### App Config Level
  190. *
  191. * ```ts
  192. * //app.module.ts
  193. * @NgModule({
  194. * ...,
  195. * imports: [
  196. * IonicModule.forRoot(MyApp, {
  197. * monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
  198. * monthShortNames: ['jan', 'fev', 'mar', ... ],
  199. * dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
  200. * dayShortNames: ['dom', 'seg', 'ter', ... ],
  201. * })
  202. * ],
  203. * ...
  204. * })
  205. * ```
  206. *
  207. * ### Component Input Level
  208. *
  209. * ```html
  210. * <ion-item>
  211. * <ion-label>Período</ion-label>
  212. * <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="myDate"
  213. * monthNames="janeiro, fevereiro, mar\u00e7o, ..."
  214. * monthShortNames="jan, fev, mar, ..."
  215. * dayNames="domingo, segunda-feira, ter\u00e7a-feira, ..."
  216. * dayShortNames="dom, seg, ter, ..."></ion-datetime>
  217. * </ion-item>
  218. * ```
  219. *
  220. *
  221. * ### Advanced Datetime Validation and Manipulation
  222. *
  223. * The datetime picker provides the simplicity of selecting an exact format, and persists
  224. * the datetime values as a string using the standardized
  225. * [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime).
  226. * However, it's important to note that `ion-datetime` does not attempt to solve all
  227. * situtations when validating and manipulating datetime values. If datetime values need
  228. * to be parsed from a certain format, or manipulated (such as adding 5 days to a date,
  229. * subtracting 30 minutes, etc.), or even formatting data to a specific locale, then we highly
  230. * recommend using [moment.js](http://momentjs.com/) to "Parse, validate, manipulate, and
  231. * display dates in JavaScript". [Moment.js](http://momentjs.com/) has quickly become
  232. * our goto standard when dealing with datetimes within JavaScript, but Ionic does not
  233. * prepackage this dependency since most apps will not require it, and its locale
  234. * configuration should be decided by the end-developer.
  235. *
  236. *
  237. * @usage
  238. * ```html
  239. * <ion-item>
  240. * <ion-label>Date</ion-label>
  241. * <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate">
  242. * </ion-datetime>
  243. * </ion-item>
  244. * ```
  245. *
  246. *
  247. * @demo /docs/demos/src/datetime/
  248. */
  249. export declare class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
  250. private _pickerCtrl;
  251. _text: string;
  252. _min: DateTimeData;
  253. _max: DateTimeData;
  254. _locale: LocaleData;
  255. _picker: Picker;
  256. /**
  257. * @input {string} The minimum datetime allowed. Value must be a date string
  258. * following the
  259. * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
  260. * such as `1996-12-19`. The format does not have to be specific to an exact
  261. * datetime. For example, the minimum could just be the year, such as `1994`.
  262. * Defaults to the beginning of the year, 100 years ago from today.
  263. */
  264. min: string;
  265. /**
  266. * @input {string} The maximum datetime allowed. Value must be a date string
  267. * following the
  268. * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
  269. * `1996-12-19`. The format does not have to be specific to an exact
  270. * datetime. For example, the maximum could just be the year, such as `1994`.
  271. * Defaults to the end of this year.
  272. */
  273. max: string;
  274. /**
  275. * @input {string} The display format of the date and time as text that shows
  276. * within the item. When the `pickerFormat` input is not used, then the
  277. * `displayFormat` is used for both display the formatted text, and determining
  278. * the datetime picker's columns. See the `pickerFormat` input description for
  279. * more info. Defaults to `MMM D, YYYY`.
  280. */
  281. displayFormat: string;
  282. /**
  283. * @input {string} The default datetime selected in picker modal if field value is empty.
  284. * Value must be a date string following the
  285. * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
  286. * `1996-12-19`.
  287. */
  288. initialValue: string;
  289. /**
  290. * @input {string} The format of the date and time picker columns the user selects.
  291. * A datetime input can have one or many datetime parts, each getting their
  292. * own column which allow individual selection of that particular datetime part. For
  293. * example, year and month columns are two individually selectable columns which help
  294. * choose an exact date from the datetime picker. Each column follows the string
  295. * parse format. Defaults to use `displayFormat`.
  296. */
  297. pickerFormat: string;
  298. /**
  299. * @input {string} The text to display on the picker's cancel button. Default: `Cancel`.
  300. */
  301. cancelText: string;
  302. /**
  303. * @input {string} The text to display on the picker's "Done" button. Default: `Done`.
  304. */
  305. doneText: string;
  306. /**
  307. * @input {array | string} Values used to create the list of selectable years. By default
  308. * the year values range between the `min` and `max` datetime inputs. However, to
  309. * control exactly which years to display, the `yearValues` input can take either an array
  310. * of numbers, or string of comma separated numbers. For example, to show upcoming and
  311. * recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
  312. */
  313. yearValues: any;
  314. /**
  315. * @input {array | string} Values used to create the list of selectable months. By default
  316. * the month values range from `1` to `12`. However, to control exactly which months to
  317. * display, the `monthValues` input can take either an array of numbers, or string of
  318. * comma separated numbers. For example, if only summer months should be shown, then this
  319. * input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
  320. * zero-based index, meaning January's value is `1`, and December's is `12`.
  321. */
  322. monthValues: any;
  323. /**
  324. * @input {array | string} Values used to create the list of selectable days. By default
  325. * every day is shown for the given month. However, to control exactly which days of
  326. * the month to display, the `dayValues` input can take either an array of numbers, or
  327. * string of comma separated numbers. Note that even if the array days have an invalid
  328. * number for the selected month, like `31` in February, it will correctly not show
  329. * days which are not valid for the selected month.
  330. */
  331. dayValues: any;
  332. /**
  333. * @input {array | string} Values used to create the list of selectable hours. By default
  334. * the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
  335. * to control exactly which hours to display, the `hourValues` input can take either an
  336. * array of numbers, or string of comma separated numbers.
  337. */
  338. hourValues: any;
  339. /**
  340. * @input {array | string} Values used to create the list of selectable minutes. By default
  341. * the mintues range from `0` to `59`. However, to control exactly which minutes to display,
  342. * the `minuteValues` input can take either an array of numbers, or string of comma separated
  343. * numbers. For example, if the minute selections should only be every 15 minutes, then
  344. * this input value would be `minuteValues="0,15,30,45"`.
  345. */
  346. minuteValues: any;
  347. /**
  348. * @input {array} Full names for each month name. This can be used to provide
  349. * locale month names. Defaults to English.
  350. */
  351. monthNames: any;
  352. /**
  353. * @input {array} Short abbreviated names for each month name. This can be used to provide
  354. * locale month names. Defaults to English.
  355. */
  356. monthShortNames: any;
  357. /**
  358. * @input {array} Full day of the week names. This can be used to provide
  359. * locale names for each day in the week. Defaults to English.
  360. */
  361. dayNames: any;
  362. /**
  363. * @input {array} Short abbreviated day of the week names. This can be used to provide
  364. * locale names for each day in the week. Defaults to English.
  365. */
  366. dayShortNames: any;
  367. /**
  368. * @input {any} Any additional options that the picker interface can accept.
  369. * See the [Picker API docs](../../picker/Picker) for the picker options.
  370. */
  371. pickerOptions: any;
  372. /**
  373. * @input {string} The text to display when there's no date selected yet.
  374. * Using lowercase to match the input attribute
  375. */
  376. placeholder: string;
  377. /**
  378. * @output {any} Emitted when the datetime selection was cancelled.
  379. */
  380. ionCancel: EventEmitter<any>;
  381. constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer, item: Item, _pickerCtrl: PickerController);
  382. /**
  383. * @hidden
  384. */
  385. ngAfterContentInit(): void;
  386. /**
  387. * @hidden
  388. */
  389. _inputNormalize(val: any): DateTimeData;
  390. /**
  391. * @hidden
  392. */
  393. _inputUpdated(): void;
  394. /**
  395. * @hidden
  396. */
  397. _inputShouldChange(): boolean;
  398. /**
  399. * TODO: REMOVE THIS
  400. * @hidden
  401. */
  402. _inputChangeEvent(): any;
  403. /**
  404. * @hidden
  405. */
  406. _inputNgModelEvent(): any;
  407. _click(ev: UIEvent): void;
  408. _keyup(): void;
  409. /**
  410. * @hidden
  411. */
  412. open(): void;
  413. /**
  414. * @hidden
  415. */
  416. generate(): void;
  417. /**
  418. * @hidden
  419. */
  420. validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): number;
  421. /**
  422. * @private
  423. */
  424. validate(): void;
  425. /**
  426. * @hidden
  427. */
  428. divyColumns(): void;
  429. /**
  430. * @hidden
  431. */
  432. updateText(): void;
  433. /**
  434. * @hidden
  435. */
  436. getValue(): DateTimeData;
  437. /**
  438. * @hidden
  439. */
  440. getValueOrDefault(): DateTimeData;
  441. /**
  442. * Get the default value as a date string
  443. * @hidden
  444. */
  445. getDefaultValueDateString(): string;
  446. /**
  447. * @hidden
  448. */
  449. hasValue(): boolean;
  450. /**
  451. * @hidden
  452. */
  453. calcMinMax(now?: Date): void;
  454. }