From 52a6d41c868e8ed77b29edc43a65ec0019301da0 Mon Sep 17 00:00:00 2001
From: Olivier Goguel <ogoguel@MacBook-Pro-de-Olivier.local>
Date: Mon, 13 Feb 2017 14:59:22 -0500
Subject: [PATCH] feat(datetime): add placeholder attribute

fixes #7966
---
 src/components/datetime/datetime.ios.scss    | 7 +++++++
 src/components/datetime/datetime.md.scss     | 7 +++++++
 src/components/datetime/datetime.ts          | 9 ++++++++-
 src/components/datetime/datetime.wp.scss     | 9 +++++++++
 src/components/datetime/test/basic/main.html | 5 +++++
 5 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss
index 07a145b0a72..d103ec6c5bf 100644
--- a/src/components/datetime/datetime.ios.scss
+++ b/src/components/datetime/datetime.ios.scss
@@ -15,7 +15,14 @@ $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
 /// @prop - Padding left of the DateTime component
 $datetime-ios-padding-left:        $item-ios-padding-left !default;
 
+/// @prop - Color of the DateTime placeholder
+$datetime-ios-placeholder-color:   #999 !default;
+
 
 .datetime-ios {
   padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
 }
+
+.datetime-ios .datetime-placeholder {
+  color: $datetime-ios-placeholder-color;
+}
diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss
index 24fa4fa9946..a2bb9913c0b 100644
--- a/src/components/datetime/datetime.md.scss
+++ b/src/components/datetime/datetime.md.scss
@@ -15,7 +15,14 @@ $datetime-md-padding-bottom:      $item-md-padding-bottom !default;
 /// @prop - Padding left of the DateTime component
 $datetime-md-padding-left:        $item-md-padding-left !default;
 
+/// @prop - Color of the DateTime placeholder
+$datetime-md-placeholder-color:   #999 !default;
+
 
 .datetime-md {
   padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left;
 }
+
+.datetime-md .datetime-placeholder {
+  color: $datetime-md-placeholder-color;
+}
diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts
index b6df3f4c34e..ae724028ab7 100644
--- a/src/components/datetime/datetime.ts
+++ b/src/components/datetime/datetime.ts
@@ -251,7 +251,8 @@ export const DATETIME_VALUE_ACCESSOR: any = {
 @Component({
   selector: 'ion-datetime',
   template:
-    '<div class="datetime-text">{{_text}}</div>' +
+    '<div *ngIf="!_text" class="datetime-text datetime-placeholder">{{placeholder}}</div>' +
+    '<div *ngIf="_text" class="datetime-text">{{_text}}</div>' +
     '<button aria-haspopup="true" ' +
             'type="button" ' +
             '[id]="id" ' +
@@ -407,6 +408,12 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
    */
   @Input() pickerOptions: any = {};
 
+   /**
+   * @input {string} The text to display when there's no date selected yet.
+   * Using lowercase to match the input attribute
+   */
+  @Input() placeholder: string = '';
+
   /**
    * @input {string} The mode determines which platform styles to use.
    * Possible values are: `"ios"`, `"md"`, or `"wp"`.
diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss
index 4a4fba1c6fb..a9129a0fc8a 100644
--- a/src/components/datetime/datetime.wp.scss
+++ b/src/components/datetime/datetime.wp.scss
@@ -24,6 +24,10 @@ $datetime-wp-border-width:        2px !default;
 /// @prop - Border color of the DateTime component
 $datetime-wp-border-color:        $input-wp-border-color !default;
 
+/// @prop - Color of the DateTime placeholder
+$datetime-wp-placeholder-color:   $input-wp-border-color !default;
+
+
 .datetime-wp {
   padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left;
 
@@ -42,3 +46,8 @@ $datetime-wp-border-color:        $input-wp-border-color !default;
 .item-datetime .datetime-wp ion-label[floating] {
   transform: translate3d(8px, 41px, 0);
 }
+
+.datetime-wp .datetime-placeholder {
+  color: $datetime-wp-placeholder-color;
+}
+
diff --git a/src/components/datetime/test/basic/main.html b/src/components/datetime/test/basic/main.html
index 8654bc5b44b..b4a83e53b92 100644
--- a/src/components/datetime/test/basic/main.html
+++ b/src/components/datetime/test/basic/main.html
@@ -14,6 +14,11 @@
     <ion-datetime displayFormat="MMMM" [(ngModel)]="monthOnly"></ion-datetime>
   </ion-item>
 
+  <ion-item>
+    <ion-label>MM DD YY</ion-label>
+    <ion-datetime displayFormat="MM DD YY" [(ngModel)]="placeholderDate" placeholder="Select Date"></ion-datetime>
+  </ion-item>
+
   <ion-item>
     <ion-label>YYYY</ion-label>
     <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>