Skip to content

Commit a52260f

Browse files
committed
docs(datetime): update datetime description
1 parent a658524 commit a52260f

File tree

1 file changed

+37
-42
lines changed

1 file changed

+37
-42
lines changed

ionic/components/datetime/datetime.ts

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,28 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
1616
/**
1717
* @name DateTime
1818
* @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.
2327
*
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+
* ```
2734
*
2835
*
2936
* ## Display and Picker Formats
3037
*
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.
3541
*
3642
* | Format | Description | Example |
3743
* |---------|--------------------------------|-------------------------|
@@ -62,34 +68,31 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
6268
*
6369
* ### Display Format
6470
*
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.
6773
*
6874
* In the following example, the display in the `<ion-datetime>` will use the
6975
* 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`.
7479
*
7580
* ```html
7681
* <ion-item>
7782
* <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>
8084
* </ion-item>
8185
* ```
8286
*
8387
* ### Picker Format
8488
*
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`.
8892
*
8993
* 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.
9396
*
9497
* ```html
9598
* <ion-item>
@@ -100,36 +103,28 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
100103
*
101104
* ### Datetime Data
102105
*
103-
* Historically, handling datetime data within JavaScript, or even within HTML
106+
* Historically, handling datetime values within JavaScript, or even within HTML
104107
* inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
105108
* notoriously difficult to correctly parse apart datetime strings or to format
106109
* 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.
110111
*
111112
* But no worries, all is not lost! Ionic's datetime input has been designed so
112113
* 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.
116116
*
117117
* ##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
118118
*
119-
* For all the reasons above, and how datetime data is commonly saved within databases,
120119
* 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.
129124
*
130125
* An ISO format can be used as a simple year, or just the hour and minute, or get more
131126
* 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
133128
* which datetime value was originally given as.
134129
*
135130
* | Description | Format | Datetime Value Example |

0 commit comments

Comments
 (0)