javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-04 13:17:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(datetime): update the datetime docs

Browse Source
This commit is contained in:
Brandy Carney
2018-03-26 13:09:06 -04:00
parent 57a5d490a6
commit 3f68031a09
1 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
core/src/components/datetime/readme.md
View File

@ -1,27 +1,23 @@
# ion-datetime # ion-datetime
The Datetime component is used to present an interface which makes it easy for Datetimes present a picker interface from the bottom of a page, making it easy for users to select
users to select dates and times. Tapping on `<ion-datetime>` will display a dates and times. The picker displays scrollable columns that can be used to individually select years,
picker interface that slides up from the bottom of the page. The picker then months, days, hours and minute values. Datetimes are similar to the native `input` elements of type
displays scrollable columns that can be used to individually select years, `datetime-local`, however, Ionic's Datetime component makes it easy to display the date and time in a
months, days, hours and minute values. The Datetime component is similar to the preferred format, and manage the datetime values.
native `<input type="datetime-local">` element, however, Ionic's Datetime
component makes it easy to display the date and time in a preferred format, and
manage the datetime values.
```html ```html
<ion-item> <ion-item>
<ion-label>Date</ion-label> <ion-label>Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" ></ion-datetime> <ion-datetime display-format="MM/DD/YYYY"></ion-datetime>
</ion-item> </ion-item>
``` ```
## Display and Picker Formats ## Display and Picker Formats
The Datetime component displays the values in two places: in the The datetime component displays the values in two places: in the `<ion-datetime>` component,
`<ion-datetime>` component, and in the interface that is presented from the and in the picker interface that is presented from the bottom of the screen. The following
bottom of the screen. The following chart lists all of the formats that can be chart lists all of the formats that can be used.
used.
| Format | Description | Example | | Format | Description | Example |
| ------ | ------------------------------ | ----------------------- | | ------ | ------------------------------ | ----------------------- |
@ -54,7 +50,7 @@ different names for the month and day.
### Display Format ### Display Format
The `displayFormat` input property specifies how a datetime's value should be The `displayFormat` input property specifies how a datetime's value should be
printed, as formatted text, within the `ion-datetime` component. printed, as formatted text, within the datetime component.
In the following example, the display in the `<ion-datetime>` will use the In the following example, the display in the `<ion-datetime>` will use the
month's short name, the numerical day with a leading zero, a comma and the month's short name, the numerical day with a leading zero, a comma and the
@ -65,7 +61,7 @@ separator. An example display using this format is: `Jun 17, 2005 11:06`.
```html ```html
<ion-item> <ion-item>
<ion-label>Date</ion-label> <ion-label>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY HH:mm"></ion-datetime> <ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
</ion-item> </ion-item>
``` ```
@ -83,7 +79,7 @@ two columns with the month's long name, and the four-digit year.
```html ```html
<ion-item> <ion-item>
<ion-label>Date</ion-label> <ion-label>Date</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" ></ion-datetime> <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY"></ion-datetime>
</ion-item> </ion-item>
``` ```
@ -153,8 +149,7 @@ selection between the beginning of 2016, and October 31st of 2020:
```html ```html
<ion-item> <ion-item>
<ion-label>Date</ion-label> <ion-label>Date</ion-label>
<ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" > <ion-datetime display-format="MMMM YYYY" min="2016" max="2020-10-31"></ion-datetime>
</ion-datetime>
</ion-item> </ion-item>
``` ```
@ -181,11 +176,11 @@ the app level, or individual `ion-datetime` level.
<ion-item> <ion-item>
<ion-label>Período</ion-label> <ion-label>Período</ion-label>
<ion-datetime <ion-datetime
displayFormat="DDDD MMM D, YYYY" display-format="DDDD MMM D, YYYY"
monthNames="janeiro, fevereiro, mar\u00e7o, ..." month-names="janeiro, fevereiro, mar\u00e7o, ..."
monthShortNames="jan, fev, mar, ..." month-short-names="jan, fev, mar, ..."
dayNames="domingo, segunda-feira, ter\u00e7a-feira, ..." day-names="domingo, segunda-feira, ter\u00e7a-feira, ..."
dayShortNames="dom, seg, ter, ..."> day-short-names="dom, seg, ter, ...">
</ion-datetime> </ion-datetime>
</ion-item> </ion-item>
``` ```
@ -205,7 +200,7 @@ dates in JavaScript.
```html ```html
<ion-item> <ion-item>
<ion-label>Date</ion-label> <ion-label>Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" > <ion-datetime display-format="MM/DD/YYYY" >
</ion-datetime> </ion-datetime>
</ion-item> </ion-item>
``` ```