From 8935a6dda18c5a0a4e3cf7e62a5ab60a0336e10b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 16 May 2016 16:38:26 -0400
Subject: [PATCH] docs(datetime): update demo for datetime

references #5010
---
 demos/datetime/index.ts  | 68 +++++++++++++++++++++++++--------
 demos/datetime/main.html | 81 +++++++++++++++++++---------------------
 2 files changed, 91 insertions(+), 58 deletions(-)

diff --git a/demos/datetime/index.ts b/demos/datetime/index.ts
index 2d23c4cd67..f90cb8ae35 100644
--- a/demos/datetime/index.ts
+++ b/demos/datetime/index.ts
@@ -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);
+  }
 }
 
 
diff --git a/demos/datetime/main.html b/demos/datetime/main.html
index 78e27b49f0..134ab81aff 100644
--- a/demos/datetime/main.html
+++ b/demos/datetime/main.html
@@ -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>