fix(datetime): enable custom day values (#9708)

* fix(datetime): dayValues attribute

fixes #7190

* fix(datetime): default to the first year if the current year doesn't exist

When the current year does not exist in yearValues, it was disabling
months when it shouldn’t - this commit fixes that so all of the months
are enabled.

Closes #7190

* fix(datetime): only set the year to the first option if yearCol exists

src/components/datetime/datetime.ts

@@ -594,9 +594,15 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     let monthOpt: PickerColumnOption;
     let dayOpt: PickerColumnOption;
 
-    // default to assuming today's year
+    // default to the current year
-    let selectedYear = today.getFullYear();
+    let selectedYear: number = today.getFullYear();
+
     if (yearCol) {
+      // default to the first value if the current year doesn't exist in the options
+      if (!yearCol.options.find(col => col.value === today.getFullYear())) {
+        selectedYear = yearCol.options[0].value;
+      }
+
       yearOpt = yearCol.options[yearCol.selectedIndex];
       if (yearOpt) {
         // they have a selected year value
@@ -639,7 +645,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
       if (isPresent(selectedMonth)) {
         // enable/disable which days are valid
         // to show within the min/max date range
-        for (i = 0; i < 31; i++) {
+        for (i = 0; i < dayCol.options.length; i++) {
           dayOpt = dayCol.options[i];
 
           // loop through each day and see if it
@@ -653,7 +659,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
 
       } else {
         // enable/disable which numbers of days to show in this month
-        for (i = 0; i < 31; i++) {
+        for (i = 0; i < dayCol.options.length; i++) {
           dayCol.options[i].disabled = (numDaysInMonth <= i);
         }
       }

src/components/datetime/test/basic/app-module.ts

@@ -8,6 +8,7 @@ import { IonicApp, IonicModule } from '../../../..';
 })
 export class E2EPage {
   myDate: any;
+  monthOnly = '2012-12-15T13:47:20.789';
   wwwInvented = '1989';
   time = '13:47:00';
   netscapeReleased = '1994-12-15T13:47:20.789';

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

@@ -9,6 +9,11 @@
 
 <ion-content class="outer-content">
 
+  <ion-item>
+    <ion-label>MMMM</ion-label>
+    <ion-datetime displayFormat="MMMM" [(ngModel)]="monthOnly"></ion-datetime>
+  </ion-item>
+
   <ion-item>
     <ion-label>YYYY</ion-label>
     <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
@@ -62,7 +67,13 @@
     <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Specific days/months/years</ion-label>
+    <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>
+
   <p aria-hidden="true" padding>
+    <code>monthOnly: {{monthOnly}}</code><br>
     <code>wwwInvented: {{wwwInvented}}</code><br>
     <code>netscapeReleased: {{netscapeReleased}}</code><br>
     <code>operaReleased: {{operaReleased}}</code><br>
@@ -71,6 +82,7 @@
     <code>chromeReleased: {{chromeReleased}}</code><br>
     <code>time: {{time}}</code><br>
     <code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
+    <code>Specific days/months/years: {{specificDaysMonthsYears}}</code><br>
   </p>
 
   <p>

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

@@ -105,6 +105,34 @@ describe('DateTime', () => {
       expect(columns[1].options[30].disabled).toEqual(true);
     });
 
+    it('should enable all of the values given', () => {
+      datetime.monthValues = '6,7,8';
+      datetime.dayValues = '01,02,03,04,05,06,08,09,10, 11, 12, 13, 14';
+      datetime.yearValues = '2014,2015';
+
+      datetime.pickerFormat = 'MM DD YYYY';
+
+      var picker = new Picker(mockApp());
+      datetime.generate(picker);
+
+      var columns = picker.getColumns();
+
+      expect(columns[0].options.length).toEqual(3); // months
+      expect(columns[1].options.length).toEqual(13); // days
+      expect(columns[2].options.length).toEqual(2); // years
+
+      datetime.validate(picker);
+
+      // Months
+      for (var i = 0; i < columns[0].options.length; i++) {
+        expect(columns[0].options[i].disabled).toEqual(false);
+      }
+
+      // // Days
+      for (var i = 0; i < columns[1].options.length; i++) {
+        expect(columns[1].options[i].disabled).toEqual(false);
+      }
+    });
   });
 
   describe('writeValue', () => {