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

docs(datetime): update demo for datetime

Browse Source 
references #5010
This commit is contained in:
Brandy Carney
2016-05-16 16:38:26 -04:00
parent ea21c6ca3c
commit 8935a6dda1
2 changed files with 91 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
demos/datetime/index.ts
View File

@ -5,27 +5,63 @@ import {App, Page} from 'ionic-angular';
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';
wwwReleased = '1991';
netscapeReleased = '1994-12-15T13:47:20.789';
firefoxReleased = '2002-09-23T15:03:46.789';
operaReleased = '1995-04-15';
webkitReleased = '1998-11-04T11:06Z';
chromeReleased = '2008-09-02';
leapYearsSummerMonths = '';
leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
tokyoTime: string;
parisTime: string;
dallasTime: string;
alertTime = '10:15';
customShortDay = [
'Dom',
'Lun',
'Mar',
'Mié',
'Jue',
'Vie',
'Sáb'
operaShortDay = [
's\u00f8n',
'man',
'tir',
'ons',
'tor',
'fre',
'l\u00f8r'
];
constructor() {
this.tokyoTime = this.calculateTime("+9");
this.parisTime = this.calculateTime("+1");
this.dallasTime = this.calculateTime("-6");
let today = new Date();
// If it is Daylight Savings Time
if (this.dst(today)) {
this.parisTime = this.calculateTime("+2");
this.dallasTime = this.calculateTime("-5");
}
}
calculateTime(offset) {
// create Date object for current location
let d = new Date();
// create new Date object for different city
// using supplied offset
let nd = new Date(d.getTime() + (3600000*offset));
return nd.toISOString();
}
// Determine if the client uses DST
stdTimezoneOffset(today) {
let jan = new Date(today.getFullYear(), 0, 1);
let jul = new Date(today.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
dst(today) {
return today.getTimezoneOffset() < this.stdTimezoneOffset(today);
}
}

81
demos/datetime/main.html
View File

@ -4,68 +4,65 @@
<ion-content class="outer-content">
<ion-list>
<ion-list-header>History of the Web</ion-list-header>
<ion-list-header>Web Release Dates</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-label>World Wide Web</ion-label>
<ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwReleased"></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-label>Netscape</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></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-label>Firefox</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased"></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-label>Opera</ion-label>
<ion-datetime displayFormat="DDD MM.DD.YY" min="1990-02" max="2000" [dayShortNames]="operaShortDay" [(ngModel)]="operaReleased"></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-label>Webkit</ion-label>
<ion-datetime displayFormat="D MMM YYYY" min="1990" max="2010" [(ngModel)]="webkitReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Chrome Released</ion-label>
<ion-label>Chrome</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-list>
<ion-list-header>World Times</ion-list-header>
<ion-item>
<ion-label>Tokyo</ion-label>
<ion-datetime displayFormat="HH:mm A" [(ngModel)]="tokyoTime"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Paris</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="parisTime"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Dallas</ion-label>
<ion-datetime displayFormat="h:mm A" [(ngModel)]="dallasTime"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Set Alarm</ion-list-header>
<ion-item>
<ion-label>Alert</ion-label>
<ion-datetime displayFormat="mm" minuteValues="0,15,30,45" [(ngModel)]="alertTime"></ion-datetime>
</ion-item>
</ion-list>
</ion-content>