fix(datetime): update selectedIndex according to ngModel value

Author: manucorporat

src/components/datetime/datetime.ts

@@ -409,7 +409,7 @@ 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
    */
@@ -570,18 +570,17 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
           })
         };
 
-        if (column.options.length) {
-          // cool, we've loaded up the columns with options
-          // preselect the option for this column
-          var selected = column.options.find(opt => opt.value === getValueFromFormat(this._value, format));
-          if (selected) {
-            // set the select index for this column's options
-            column.selectedIndex = column.options.indexOf(selected);
-          }
-
-          // add our newly created column to the picker
-          picker.addColumn(column);
+        // cool, we've loaded up the columns with options
+        // preselect the option for this column
+        var optValue = getValueFromFormat(this._value, format);
+        var selectedIndex = column.options.findIndex(opt => opt.value === optValue);
+        if (selectedIndex >= 0) {
+          // set the select index for this column's options
+          column.selectedIndex = selectedIndex;
         }
+
+        // add our newly created column to the picker
+        picker.addColumn(column);
       });
 
       const min = <any>this._min;
@@ -600,22 +599,14 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     }
   }
 
-  /**
-   * @private
-   */
-  getColumn(name: string): PickerColumn {
-    const columns = this._picker.getColumns();
-    return columns.find(col => col.name === name);
-  }
-
   /**
    * @private
    */
   validateColumn(name: string, index: number, min: number, max: number, lowerBounds: number[], upperBounds: number[]): number {
     assert(lowerBounds.length === 5, 'lowerBounds length must be 5');
     assert(upperBounds.length === 5, 'upperBounds length must be 5');
 
-    const column = this.getColumn(name);
+    const column = this._picker.getColumn(name);
     if (!column) {
       return 0;
     }
@@ -652,7 +643,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     const today = new Date();
     const minCompareVal = dateDataSortValue(this._min);
     const maxCompareVal = dateDataSortValue(this._max);
-    const yearCol = this.getColumn('year');
+    const yearCol = this._picker.getColumn('year');
 
     assert(minCompareVal <= maxCompareVal, 'invalid min/max value');
 

src/components/datetime/test/issues/main.html

@@ -68,4 +68,19 @@
     ></ion-datetime>
   </ion-item>
 
+  <ion-item>
+    <ion-label>
+      displayFormat="D MMMM YYYY"
+      pickerFormat="D MMMM YYYY"
+      min="2017-03-08"
+      max="2020-12-31"
+    </ion-label>
+    <ion-datetime
+      displayFormat="D MMMM YYYY"
+      pickerFormat="D MMMM YYYY"
+      min="2017-03-08"
+      max="2020-12-31"
+      ></ion-datetime>
+  </ion-item>
+
 </ion-content>

src/components/picker/picker-component.ts

@@ -422,7 +422,7 @@ export class PickerColumnCmp {
       }
     }
 
-    var selectedIndex = clamp(min, this.col.selectedIndex, max);
+    const selectedIndex = clamp(min, this.col.selectedIndex, max);
 
     if (selectedIndex !== this.col.selectedIndex) {
       var y = (selectedIndex * this.optHeight) * -1;
@@ -512,7 +512,7 @@ export class PickerCmp {
       if (!isPresent(column.options)) {
         column.options = [];
       }
-      column.selectedIndex = 0;
+      column.selectedIndex = column.selectedIndex || 0;
       column.options = column.options.map(inputOpt => {
         let opt: PickerColumnOption = {
           text: '',

src/components/picker/picker.ts

@@ -53,6 +53,10 @@ export class Picker extends ViewController {
     return this.data.columns;
   }
 
+  getColumn(name: string): PickerColumn {
+    return this.getColumns().find(column => column.name === name);
+  }
+
   refresh() {
     this._cmp && this._cmp.instance.refresh && this._cmp.instance.refresh();
   }

src/util/datetime-util.ts

@@ -229,7 +229,7 @@ export function parseDate(val: any): DateTimeData {
 }
 
 
-export function updateDate(existingData: DateTimeData, newData: any) {
+export function updateDate(existingData: DateTimeData, newData: any): boolean {
   if (isPresent(newData) && newData !== '') {
 
     if (isString(newData)) {
@@ -239,7 +239,7 @@ export function updateDate(existingData: DateTimeData, newData: any) {
       if (newData) {
         // successfully parsed the ISO string to our DateTimeData
         Object.assign(existingData, newData);
-        return;
+        return true;
       }
 
     } else if ((isPresent(newData.year) || isPresent(newData.hour) || isPresent(newData.month) || isPresent(newData.day) || isPresent(newData.minute) || isPresent(newData.second))) {
@@ -262,7 +262,7 @@ export function updateDate(existingData: DateTimeData, newData: any) {
         (<any>existingData)[k] = newData[k].value;
       }
 
-      return;
+      return true;
     }
 
     // eww, invalid data
@@ -274,6 +274,7 @@ export function updateDate(existingData: DateTimeData, newData: any) {
       delete (<any>existingData)[k];
     }
   }
+  return false;
 }