Fixed issue where strings being passed in caused issues

-If you had a json string as part of the input dates the text box would say "Invalid Date" instead of ignoring it.  That function now validates that the value is a date using new static method

projects/uiowa/date-range-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/date-range-picker",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Changhui Xu <[email protected]>",
   "contributors": [
     "Jacob Feuerbach <[email protected]>"

projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts

@@ -78,7 +78,12 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
   }
 
   private formatInputText(): string {
-    if (this.dateRange.start && this.dateRange.end) {
+    if (
+      this.dateRange.start &&
+      this.dateRange.end &&
+      DateRange.isValidDate(this.dateRange.start) &&
+      DateRange.isValidDate(this.dateRange.end)
+    ) {
       return `${this.dateRange.start.toLocaleDateString()} - ${this.dateRange.end.toLocaleDateString()}`;
     }
     return '';

projects/uiowa/date-range-picker/src/lib/date-range.ts

@@ -18,4 +18,32 @@ export class DateRange {
     end.setMonth(end.getMonth() + 1);
     return new DateRange(start, end);
   }
+
+  static createDateRange(start: any, end: any): DateRange {
+    let startDate = null;
+    let endDate = null;
+    if (DateRange.isValidDate(start)) {
+      startDate = new Date(start);
+    }
+    if (DateRange.isValidDate(end)) {
+      endDate = new Date(end);
+    }
+    return new DateRange(startDate, endDate);
+  }
+
+  static isValidDate(value: any): boolean {
+    switch (typeof value) {
+      case 'number':
+        return true;
+      case 'string':
+        return !isNaN(Date.parse(value));
+      case 'object':
+        if (value instanceof Date) {
+          return !isNaN(value.getTime());
+        }
+        break;
+      default:
+        return false;
+    }
+  }
 }

src/app/app.component.html

@@ -1,36 +1,49 @@
 <div class="container my-5">
   <div class="row">
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Max Date Example and opens in the past</strong>
       <date-range-picker [(dateRange)]="dateRange" [maxDate]="maxDate"></date-range-picker>
       <pre>{{ dateRange | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Regular</strong>
       <date-range-picker [(dateRange)]="dateRange1"></date-range-picker>
       <pre>{{ dateRange1 | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Longer Range</strong>
       <date-range-picker [(dateRange)]="dateRange2"></date-range-picker>
       <pre>{{ dateRange2 | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Both Dates Not Null</strong>
       <date-range-picker [(dateRange)]="dateRange3"></date-range-picker>
       <pre>{{ dateRange3 | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Not Null Start Date / Null End date</strong>
       <date-range-picker [(dateRange)]="dateRange5"></date-range-picker>
       <pre>{{ dateRange5 | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Null Start Date / Not Null End date</strong>
       <date-range-picker [(dateRange)]="dateRange6"></date-range-picker>
       <pre>{{ dateRange6 | json }} </pre>
       <hr>
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Non-Date input example</strong>
+      <date-range-picker [(dateRange)]="dateRange7"></date-range-picker>
+      <pre>{{ dateRange7 | json }} </pre>
+      <hr>
+    </section>
+    <section class="col-12 col-sm-6 col-lg-4 mb-4">
+      <strong>Change Date with Button Example</strong>
       <date-range-picker [(dateRange)]="dateRange4"></date-range-picker>
       <pre>{{ dateRange4 | json }} </pre>
       <button type="button" class="btn btn-primary" (click)="changedate()">Change Date</button>