javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(datetime): add docs for datetime and demos

Browse Source 
references #5010
This commit is contained in:
Brandy Carney
2016-05-16 11:51:18 -04:00
parent 1e331c9ca0
commit ba2826068f
4 changed files with 149 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
demos/datetime/index.ts Normal file
View File

@ -0,0 +1,41 @@
import {App, Page} from 'ionic-angular';
@Page({
templateUrl: 'main.html'
})
class MainPage {
wwwInvented = '1989';
time = '13:47';
netscapeRelease = '1994-12-15T13:47:20.789';
operaRelease = '1995-04-15';
firefoxRelease = '2002-09-23T15:03:46.789';
webkitOpenSourced = '2005-06-17T11:06Z';
chromeReleased = '2008-09-02';
leapYearsSummerMonths = '';
leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
customShortDay = [
'Dom',
'Lun',
'Mar',
'Mié',
'Jue',
'Vie',
'Sáb'
];
}
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class ApiDemoApp {
root = MainPage;
constructor() {
}
}

71
demos/datetime/main.html Normal file
View File

@ -0,0 +1,71 @@
<ion-navbar *navbar>
<ion-title>DateTime</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>History of the Web</ion-list-header>
<ion-item>
<ion-label>World Wide Web Invented</ion-label>
<ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Netscape Released</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeRelease"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Firefox Released</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxRelease"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Opera Released (Español)</ion-label>
<ion-datetime displayFormat="DDD. MM/DD/YY" min="1990-02" max="2000" [dayShortNames]="customShortDay" [(ngModel)]="operaRelease"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Webkit Open Source Date</ion-label>
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Chrome Released</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
</ion-item>
</ion-list>
<p aria-hidden="true" padding>
World Wide Web Invented: <code>{{wwwInvented}}</code><br>
Netscape Released: <code>{{netscapeRelease}}</code><br>
Opera Released: <code>{{operaRelease}}</code><br>
Firefox Released: <code>{{firefoxRelease}}</code><br>
Webkit Open Source Date: <code>{{webkitOpenSourced}}</code><br>
Chrome Released: <code>{{chromeReleased}}</code><br>
time: <code>{{time}}</code><br>
Leap year, summer months: <code>{{leapYears}}</code><br>
</p>
</ion-content>

70
ionic/components/datetime/datetime.ts
View File

@ -16,10 +16,13 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
/**
* @name DateTime
* @description
* The `ion-datetime` component is similar to an HTML `<input type="datetime-local">`
* input, however, Ionic's datetime component makes it easier for developers to
* display an exact datetime input format and manage values within JavaScript.
* Additionally, the datetime component makes it easier for users to scroll through
* The Date/Time Picker displays a dialog from the bottom of a page.
*
*
* It is similar to the native `<input type="datetime-local">` element.
* However, Ionic's Date/Time component makes it easy for developers to display
* the date in their preferred format and manage the date from their JavaScript.
* Additionally, the Date/Time component makes it easier for users to scroll through
* and individually select parts of date and time values from an easy to user interface.
*
* ```html
@ -33,37 +36,36 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
*
* ### Display and Picker Formats
*
* How datetime values can be displayed can come in many variations formats,
* therefore it is best to let the app decide exactly how to display it. To do
* so, `ion-datetime` uses a common format seen in many other libraries and
* programming languages:
* Datetime values can be displayed in many different formats, so it is best to
* let the app decide exactly how to display it. To do so, `ion-datetime` uses
* a common format seen in many other libraries and programming languages:
*
* | Format | Description | Examples |
* |----------|---------------------|----------------|
* | `YYYY` | Year, 4 digits | `2018` |
* | `YY` | Year, 2 digits | `18` |
* | `M` | Month, 1 digit | `1` .. `12` |
* | `MM` | Month, 2 digit | `01` .. `12` |
* | `MMM` | Month, short name | `Jan` * |
* | `MMMM` | Month, full name | `January` * |
* | `D` | Day, 1 digit | `1` .. `31` |
* | `DD` | Day, 2 digit | `01` .. `31` |
* | `DDD` | Day, short name | `Fri` * |
* | `DDDD` | Day, full name | `Friday` * |
* | `H` | 24-hour, 1 digit | `0` .. `23` |
* | `HH` | 24-hour, 2 digit | `00` .. `23` |
* | `h` | 12-hour, 1 digit | `1` .. `12` |
* | `hh` | 12-hour, 2 digit | `01` .. `12` |
* | `a` | am/pm, lower case | `am` `pm` |
* | `A` | AM/PM, upper case | `AM` `PM` |
* | `m` | minute, 1 digit | `1` .. `59` |
* | `mm` | minute, 2 digit | `01` .. `59` |
* | `s` | seconds, 1 digit | `1` .. `59` |
* | `ss` | seconds, 2 digit | `01` .. `59` |
* | `Z` | UTC Timezone Offset | |
* | Format | Description | Example |
* |---------|--------------------------------|-------------------------|
* | `YYYY` | Year, 4 digits | `2018` |
* | `YY` | Year, 2 digits | `18` |
* | `M` | Month | `1` ... `12` |
* | `MM` | Month, leading zero | `01` ... `12` |
* | `MMM` | Month, short name | `Jan` |
* | `MMMM` | Month, full name | `January` |
* | `D` | Day | `1` ... `31` |
* | `DD` | Day, leading zero | `01` ... `31` |
* | `DDD` | Day, short name | `Fri` |
* | `DDDD` | Day, full name | `Friday` |
* | `H` | Hour, 24-hour | `0` ... `23` |
* | `HH` | Hour, 24-hour, leading zero | `00` ... `23` |
* | `h` | Hour, 12-hour | `1` ... `12` |
* | `hh` | Hour, 12-hour, leading zero | `01` ... `12` |
* | `a` | 12-hour time period, lowercase | `am` `pm` |
* | `A` | 12-hour time period, uppercase | `AM` `PM` |
* | `m` | Minute | `1` ... `59` |
* | `mm` | Minute, leading zero | `01` ... `59` |
* | `s` | Second | `1` ... `59` |
* | `ss` | Second, leading zero | `01` ... `59` |
* | `Z` | UTC Timezone Offset | `Z or +HH:mm or -HH:mm` |
*
* * See the "Month Names and Day of the Week Names" section below on how to
* use names other than the default English month and day names.
* **Important**: See the [Month Names and Day of the Week Names](#month-names-and-day-of-the-week-names)
* section below on how to use different names for the month and day.
*
* The `displayFormat` input allows developers to specify how a date's value
* should be displayed within the `ion-datetime`. The `pickerFormat` decides
@ -237,7 +239,7 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
* prepackage this dependency since most apps will not require it, and its locale
* configuration should be decided by the end-developer.
*
*
* @demo /docs/v2/demos/datetime/
*/
@Component({
selector: 'ion-datetime',

2
ionic/components/datetime/test/basic/main.html
View File

@ -65,4 +65,4 @@
<code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
</p>
</ion-content>
</ion-content>