feat(datetime): add placeholder attribute

fixes #7966

Author: Olivier Goguel

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;
+}

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;
+}

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"`.

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;
+}
+

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>