Merge branch 'jacek-jaskolski-datetime_default_value'

Author: mlynch

src/components/datetime/datetime.ts

@@ -322,6 +322,14 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
    */
   @Input() displayFormat: string;
 
+  /**
+   * @input {string} The default datetime selected in picker modal if field value is empty.
+   * Value must be a date string following the
+   * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
+   * `1996-12-19`.
+   */
+  @Input() initialValue: string;
+
   /**
    * @input {string} The format of the date and time picker columns the user selects.
    * A datetime input can have one or many datetime parts, each getting their
@@ -550,11 +558,6 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
    * @hidden
    */
   generate() {
-    // If the date doesn't have a value yet, set it to now or the max value
-    if (Object.keys(this._value).length === 0) {
-      this._value = this.getDefaultValue();
-    }
-
     const picker = this._picker;
     // if a picker format wasn't provided, then fallback
     // to use the display format
@@ -605,7 +608,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
 
         // cool, we've loaded up the columns with options
         // preselect the option for this column
-        const optValue = getValueFromFormat(this.getValue(), format);
+        const optValue = getValueFromFormat(this.getValueOrDefault(), format);
         const selectedIndex = column.options.findIndex(opt => opt.value === optValue);
         if (selectedIndex >= 0) {
           // set the select index for this column's options
@@ -781,6 +784,51 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
     return this._value;
   }
 
+  /**
+   * @hidden
+   */
+  getValueOrDefault(): DateTimeData {
+    if (this.hasValue()) {
+      return this._value;
+    }
+
+    const initialDateString = this.getDefaultValueDateString();
+    const _default = {};
+    updateDate(_default, initialDateString);
+    return _default;
+  }
+
+  /**
+   * Get the default value as a date string
+   * @hidden
+   */
+  getDefaultValueDateString() {
+    if (this.initialValue) {
+      return this.initialValue;
+    }
+
+    const nowString = (new Date).toISOString();
+    if (this.max) {
+      const now = parseDate(nowString);
+      const max = parseDate(this.max);
+
+      let v;
+      for (let i in max) {
+        v = (<any>max)[i];
+        if (v === null) {
+          (<any>max)[i] = (<any>now)[i];
+        }
+      }
+
+      const diff = compareDates(now, max);
+      // If max is before current time, return max
+      if (diff > 0) {
+        return this.max;
+      }
+    }
+    return nowString;
+  }
+
   /**
    * @hidden
    */
@@ -844,25 +892,6 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
       }
     }
   }
-
-  /**
-   * Get the default value to show when none is provided,
-   * and within the bounds of the max value
-   * @private
-   */
-  getDefaultValue() {
-    const now = parseDate((new Date).toISOString());
-    if (this.max) {
-      const max = parseDate(this.max);
-      const diff = compareDates(now, max);
-
-      // If max is before current time, return max
-      if (diff > 0) {
-        return max;
-      }
-    }
-    return now;
-  }
 }
 
 /**

src/components/datetime/test/basic/pages/root-page/root-page.html

@@ -16,7 +16,12 @@
 
   <ion-item>
     <ion-label>MM DD YY</ion-label>
-    <ion-datetime displayFormat="MM DD YY" [(ngModel)]="placeholderDate" placeholder="Select Date"></ion-datetime>
+    <ion-datetime pickerFormat="YYYY-MM-DDThh:mm" [(ngModel)]="placeholderDate" placeholder="Select Date"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>MM DD YY</ion-label>
+    <ion-datetime displayFormat="MM DD YY" [(ngModel)]="placeholderDate" placeholder="Select Date" initialValue="1987-10-19"></ion-datetime>
   </ion-item>
 
   <ion-item>
@@ -77,6 +82,11 @@
     <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY" [(ngModel)]="specificDaysMonthsYears"></ion-datetime>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Default value</ion-label>
+    <ion-datetime max="2100" pickerDefault="2017-08-06" [(ngModel)]="defaultValue"></ion-datetime>
+  </ion-item>
+
   <p aria-hidden="true" padding>
     <code>monthOnly: {{monthOnly}}</code><br>
     <code>wwwInvented: {{wwwInvented}}</code><br>
@@ -88,6 +98,7 @@
     <code>time: {{time}}</code><br>
     <code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
     <code>Specific days/months/years: {{specificDaysMonthsYears}}</code><br>
+    <code>Default value: {{defaultValue}}</code><br>
   </p>
 
   <p>

src/components/datetime/test/basic/pages/root-page/root-page.ts

@@ -17,6 +17,7 @@ export class RootPage {
   leapYearsSummerMonths = '';
   convertedDate = '';
   specificDaysMonthsYears = '';
+  defaultValue: any;
 
   leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
 

src/components/datetime/test/datetime.spec.ts

@@ -14,36 +14,6 @@ describe('DateTime', () => {
 
   describe('validate', () => {
 
-    it('should default to now if no initial value or bounds supplied', () => {
-      const now = datetimeUtil.parseDate(new Date().toISOString());
-      datetime.generate();
-      const val = datetime.getValue();
-      expect(val.year).toEqual(now.year);
-      expect(val.month).toEqual(now.month);
-      expect(val.day).toEqual(now.day);
-      expect(val.hour).toEqual(now.hour);
-      expect(val.minute).toEqual(now.minute);
-    });
-
-    it('should default to max if no initial value supplied but max specified and max before current', () => {
-      datetime.max = '1987-10-19';
-      datetime.generate();
-      const val = datetime.getValue();
-      expect(val.year).toEqual(1987);
-      expect(val.month).toEqual(10);
-      expect(val.day).toEqual(19);
-    });
-
-    it('should default to current if no initial value supplied but max specified and max after current', () => {
-      const now = datetimeUtil.parseDate(new Date().toISOString());
-      datetime.max = '2100-10-19';
-      datetime.generate();
-      const val = datetime.getValue();
-      expect(val.year).toEqual(now.year);
-      expect(val.month).toEqual(now.month);
-      expect(val.day).toEqual(now.day);
-    });
-
     it('should restrict January 1-14, 2000 from selection, then allow it, and restrict December 15-31, 2001', () => {
       datetime.max = '2001-12-15';
       datetime.min = '2000-01-15';
@@ -521,6 +491,53 @@ describe('DateTime', () => {
 
   });
 
+  describe('defaultValue', () => {
+    it('should default to now if no initial value or bounds supplied', () => {
+      const now = datetimeUtil.parseDate(new Date().toISOString());
+      datetime.pickerFormat = 'YYYY-MM-DDThh:mm';
+      datetime.generate();
+      var columns = picker.getColumns();
+      expect(columns[0].options[columns[0].selectedIndex].value).toEqual(now.year);
+      expect(columns[1].options[columns[1].selectedIndex].value).toEqual(now.month);
+      expect(columns[2].options[columns[2].selectedIndex].value).toEqual(now.day);
+      expect(columns[3].options[columns[3].selectedIndex].value).toEqual(now.hour % 12);
+      expect(columns[4].options[columns[4].selectedIndex].value).toEqual(now.minute);
+    });
+
+    it('should default to max if no initial value supplied but max specified and max before current', () => {
+      datetime.max = '1987-10-19';
+      datetime.generate();
+      var columns = picker.getColumns();
+      expect(columns[0].options[columns[0].selectedIndex].value).toEqual(10);
+      expect(columns[1].options[columns[1].selectedIndex].value).toEqual(19);
+      expect(columns[2].options[columns[2].selectedIndex].value).toEqual(1987);
+    });
+
+    it('should default to current if no initial value supplied but max specified and max after current', () => {
+      const now = datetimeUtil.parseDate(new Date().toISOString());
+      datetime.max = '2100-10-19';
+      datetime.generate();
+      var columns = picker.getColumns();
+      expect(columns[0].options[columns[0].selectedIndex].value).toEqual(now.month);
+      expect(columns[1].options[columns[1].selectedIndex].value).toEqual(now.day);
+      expect(columns[2].options[columns[2].selectedIndex].value).toEqual(now.year);
+    });
+
+    it('should use pickerDefault if has no value', zoned(() => {
+      datetime.max = '2100-12-31';
+      datetime.pickerFormat = 'DD MMMM YYYY';
+      datetime.initialValue = '2004-08-06';
+
+      datetime.generate();
+      var columns = picker.getColumns();
+
+      expect(columns[0].options[columns[0].selectedIndex].value).toEqual(6);
+      expect(columns[1].options[columns[1].selectedIndex].value).toEqual(8);
+      expect(columns[2].options[columns[2].selectedIndex].value).toEqual(2004);
+    }));
+
+  });
+
   describe('setValue', () => {
 
     it('should update existing time value with 12-hour PM DateTimeData value', zoned(() => {