@@ -16,22 +16,28 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
16
16
/**
17
17
* @name DateTime
18
18
* @description
19
- * The DateTime component can be added to a template using the `<ion-datetime>` element.
20
- * Tapping on the `<ion-datetime>` element will display a dialog that slides up from the
21
- * bottom of the page. The dialog displays scrollable columns that can be used to select
22
- * date and time values.
19
+ * The DateTime component is used to present an interface which makes it easy for
20
+ * users to select dates and times. Tapping on `<ion-datetime>` will display a picker
21
+ * interface that slides up from the bottom of the page. The picker then displays
22
+ * scrollable columns that can be used to individually select years, months, days,
23
+ * hours and minute values. The DateTime component is similar to the native
24
+ * `<input type="datetime-local">` element, however, Ionic's DateTime component makes
25
+ * it easy to display the date and time in a preferred format, and manage the datetime
26
+ * values.
23
27
*
24
- * It is similar to the native `<input type="datetime-local">` element, however, Ionic's
25
- * DateTime component makes it easy for developers to display the date in their preferred
26
- * format and manage the date from their JavaScript.
28
+ * ```html
29
+ * <ion-item>
30
+ * <ion-label>Date</ion-label>
31
+ * <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
32
+ * </ion-item>
33
+ * ```
27
34
*
28
35
*
29
36
* ## Display and Picker Formats
30
37
*
31
- * The DateTime component displays the date/time in two places: in the `<ion-datetime>`
32
- * element, and in the dialog that presents from the bottom of the screen. These both
33
- * can be customized to display in many different formats. The following chart lists
34
- * all of the formats that can be passed to the different inputs.
38
+ * The DateTime component displays the values in two places: in the `<ion-datetime>`
39
+ * component, and in the interface that is presented from the bottom of the screen.
40
+ * The following chart lists all of the formats that can be used.
35
41
*
36
42
* | Format | Description | Example |
37
43
* |---------|--------------------------------|-------------------------|
@@ -62,34 +68,31 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
62
68
*
63
69
* ### Display Format
64
70
*
65
- * The `displayFormat` input specifies how a date 's value should be displayed
66
- * within the `ion-datetime` element .
71
+ * The `displayFormat` input property specifies how a datetime 's value should be
72
+ * printed, as formatted text, within the `ion-datetime` component .
67
73
*
68
74
* In the following example, the display in the `<ion-datetime>` will use the
69
75
* month's short name, the numerical day with a leading zero, a comma and the
70
- * 4 digit year. In addition to the date, it will display the time with the hours
71
- * in the 24-hour format and the minutes. Both the hour and minutes will be displayed
72
- * with a leading zero, and they are separated by a `:` character. Any character
73
- * can be used as a separator. An example display using this format is: `Jun 17, 2005 11:06`.
76
+ * four-digit year. In addition to the date, it will display the time with the hours
77
+ * in the 24-hour format and the minutes. Any character can be used as a separator.
78
+ * An example display using this format is: `Jun 17, 2005 11:06`.
74
79
*
75
80
* ```html
76
81
* <ion-item>
77
82
* <ion-label>Date</ion-label>
78
- * <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate">
79
- * </ion-datetime>
83
+ * <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
80
84
* </ion-item>
81
85
* ```
82
86
*
83
87
* ### Picker Format
84
88
*
85
- * The `pickerFormat` input determines which columns should be shown in the dialog,
86
- * the order of the columns, and which format to use to display the value. If the
87
- *`pickerFormat` input is not provided then it will use the `displayFormat`.
89
+ * The `pickerFormat` input property determines which columns should be shown in the
90
+ * interface, the order of the columns, and which format to use within each column.
91
+ * If the `pickerFormat` input is not provided then it will default to the `displayFormat`.
88
92
*
89
93
* In the following example, the display in the `<ion-datetime>` will use the
90
- * numerical month with a leading zero, followed by a forward slash `/` and the
91
- * 4 digit year. An example display using this format is: `06/2020`. The dialog
92
- * will display two columns: the month's long name, and the 4 digit year.
94
+ * `MM/YYYY` format, such as `06/2020`. However, the picker interface
95
+ * will display two columns with the month's long name, and the four-digit year.
93
96
*
94
97
* ```html
95
98
* <ion-item>
@@ -100,36 +103,28 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
100
103
*
101
104
* ### Datetime Data
102
105
*
103
- * Historically, handling datetime data within JavaScript, or even within HTML
106
+ * Historically, handling datetime values within JavaScript, or even within HTML
104
107
* inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
105
108
* notoriously difficult to correctly parse apart datetime strings or to format
106
109
* datetime values. Even worse is how different browsers and JavaScript versions
107
- * parse various datetime strings differently, especially per locale. Additional,
108
- * developers face even more challenges when dealing with timezones using
109
- * JavaScript's core `Date` object.
110
+ * parse various datetime strings differently, especially per locale.
110
111
*
111
112
* But no worries, all is not lost! Ionic's datetime input has been designed so
112
113
* developers can avoid the common pitfalls, allowing developers to easily format
113
- * datetime data within the input, and give the user a simple datetime picker for a
114
- * great user experience. Oddly enough, one of the best ways to work with datetime
115
- * values in JavaScript is to not use the `Date` object at all.
114
+ * datetime values within the input, and give the user a simple datetime picker for a
115
+ * great user experience.
116
116
*
117
117
* ##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
118
118
*
119
- * For all the reasons above, and how datetime data is commonly saved within databases,
120
119
* Ionic uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
121
- * for both its input value, and output value. The value is simply a string, rather
122
- * than using JavaScript's `Date` object, and it strictly follows the standardized
123
- * ISO 8601 format. Additionally, when using the ISO datetime string format, it makes
124
- * it easier on developers when passing data within JSON objects, and sending databases
125
- * a standardized datetime format which it can be easily parse apart and formatted.
126
- * Because of the strict adherence to the ISO 8601 format, and not involving the hundreds
127
- * of other format possibilities and locales, this approach actually makes it easier
128
- * for Ionic apps and backend-services to manage datetime data.
120
+ * for its value. The value is simply a string, rather than using JavaScript's `Date`
121
+ * object. Additionally, when using the ISO datetime format, it makes it easier
122
+ * to serialize and pass within JSON objects, and sending databases a standardized
123
+ * format which it can be easily parsed if need be.
129
124
*
130
125
* An ISO format can be used as a simple year, or just the hour and minute, or get more
131
126
* detailed down to the millisecond and timezone. Any of the ISO formats below can be used,
132
- * and after a user selects a new date , Ionic will continue to use the same ISO format
127
+ * and after a user selects a new value , Ionic will continue to use the same ISO format
133
128
* which datetime value was originally given as.
134
129
*
135
130
* | Description | Format | Datetime Value Example |
0 commit comments