Release v6.0.0

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "uiowa"
+    ]
+}

README.md

@@ -1,14 +1,16 @@
 # DateRangePicker
 
-An Angular library of Date Range Picker. Dependencies: Angular, ng-bootstrap, Bootstrap 4 (css)
+An Angular library of Date Range Picker. Dependencies: Angular, ng-bootstrap, Bootstrap >4 (css)
+
+Since **v6.0.0**, this library is only compatible with Angular >=13 and ng-bootstrap >=11.
 
 Since **v5.0.0**, this library is only compatible with Angular >=12 and ng-bootstrap >=10.
 
 Since **v4.0.0**, this library is only compatible with Angular >=10 and ng-bootstrap >=7.
 
 Since **v3.0.0**, this library requires @angular/localize, due to updates in Angular 9 and ng-bootstrap 6.
 
-[![Build Status](https://img.shields.io/travis/changhuixu/date-range-picker/master.svg?label=Travis%20CI&style=flat-square)](https://travis-ci.org/changhuixu/date-range-picker)
+[![Build Status](https://img.shields.io/travis/changhuixu/date-range-picker/master.svg?label=Travis%20CI&style=flat-square)](https://app.travis-ci.com/changhuixu/date-range-picker)
 [![npm](https://img.shields.io/npm/v/@uiowa/date-range-picker.svg?style=flat-square)](https://www.npmjs.com/package/@uiowa/date-range-picker)
 
 ```bash

cypress/integration/date-range-picker.spec.ts

@@ -1,12 +1,12 @@
-import { AppComponent } from '../../src/app/app.component';
+import { DateRange } from '../../projects/uiowa/date-range-picker/src/lib/models/date-range';
 
 describe('date-range-picker tests', () => {
   before(() => {
     cy.visit('');
   });
 
   it('should show initial state: 1', () => {
-    const dateRange = new AppComponent().dateRange1;
+    const dateRange = DateRange.nextTwoWeeks();
     const dateRangeString = `${dateRange.start!.toLocaleDateString()} - ${dateRange.end!.toLocaleDateString()}`;
     cy.get('[data-cy=regular-date-range] input')
       .should('have.value', dateRangeString)
@@ -36,7 +36,7 @@ describe('date-range-picker tests', () => {
   });
 
   it('should show initial state: 2', () => {
-    const dateRange = new AppComponent().dateRange3;
+    const dateRange = new DateRange(new Date(2018, 9, 1), new Date(2018, 9, 9));
     const dateRangeString = `${dateRange.start!.toLocaleDateString()} - ${dateRange.end!.toLocaleDateString()}`;
     cy.get('[data-cy=both-dates-not-null] input')
       .should('have.value', dateRangeString)

projects/uiowa/date-range-picker/README.md

@@ -1,14 +1,16 @@
 # DateRangePicker
 
-An Angular library of Date Range Picker. Dependencies: Angular, ng-bootstrap, Bootstrap 4 (css)
+An Angular library of Date Range Picker. Dependencies: Angular, ng-bootstrap, Bootstrap >4 (css)
+
+Since **v6.0.0**, this library is only compatible with Angular >=13 and ng-bootstrap >=11.
 
 Since **v5.0.0**, this library is only compatible with Angular >=12 and ng-bootstrap >=10.
 
 Since **v4.0.0**, this library is only compatible with Angular >=10 and ng-bootstrap >=7.
 
 Since **v3.0.0**, this library requires @angular/localize, due to updates in Angular 9 and ng-bootstrap 6.
 
-[![Build Status](https://img.shields.io/travis/changhuixu/date-range-picker/master.svg?label=Travis%20CI&style=flat-square)](https://travis-ci.org/changhuixu/date-range-picker)
+[![Build Status](https://img.shields.io/travis/changhuixu/date-range-picker/master.svg?label=Travis%20CI&style=flat-square)](https://app.travis-ci.com/changhuixu/date-range-picker)
 [![npm](https://img.shields.io/npm/v/@uiowa/date-range-picker.svg?style=flat-square)](https://www.npmjs.com/package/@uiowa/date-range-picker)
 
 ```bash

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

@@ -2,9 +2,6 @@
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../../dist/uiowa/date-range-picker",
   "lib": {
-    "entryFile": "src/public-api.ts",
-    "umdModuleIds": {
-      "@ng-bootstrap/ng-bootstrap": "@ng-bootstrap/ng-bootstrap"
-    }
+    "entryFile": "src/public-api.ts"
   }
 }

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

@@ -5,25 +5,25 @@ import {
   Output,
   EventEmitter,
   OnChanges,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 import { NgbDate, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'date-picker',
   templateUrl: './date-picker.component.html',
-  styleUrls: ['./date-picker.component.css']
+  styleUrls: ['./date-picker.component.css'],
 })
 export class DatePickerComponent implements OnInit, OnChanges {
   @Input()
-  date: Date;
+  date: Date | null = null;
   @Input()
-  disabled? = false;
+  disabled = false;
 
   @Output()
   dateChange = new EventEmitter<Date>();
 
-  ngbDate: NgbDate;
+  ngbDate: NgbDate | null = null;
 
   constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
 
@@ -32,13 +32,14 @@ export class DatePickerComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.date || changes.disabled) {
+    if (changes['date'] || changes['disabled']) {
       this.ngOnInit();
     }
   }
 
   onDateChange(date: NgbDate) {
-    this.dateChange.emit(this.dateAdapter.toModel(date));
+    const newDate = this.dateAdapter.toModel(date);
+    if (newDate) this.dateChange.emit(newDate);
   }
 
   isWeekend(date: NgbDate) {

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

@@ -7,41 +7,41 @@ import {
   ElementRef,
   ViewChild,
   OnChanges,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 import {
   NgbInputDatepicker,
   NgbDate,
-  NgbDateNativeAdapter
+  NgbDateNativeAdapter,
 } from '@ng-bootstrap/ng-bootstrap';
 import { DateRange } from '../models/date-range';
 
 @Component({
   selector: 'date-range-picker',
   templateUrl: './date-range-picker.component.html',
-  styleUrls: ['./date-range-picker.component.css']
+  styleUrls: ['./date-range-picker.component.css'],
 })
 export class DateRangePickerComponent implements OnInit, OnChanges {
   @Input()
-  dateRange: DateRange;
+  dateRange: DateRange = new DateRange();
   @Input()
   minDate?: Date;
   @Input()
   maxDate?: Date;
   @Input()
-  disabled? = false;
+  disabled = false;
   @Output()
   dateRangeChange = new EventEmitter<DateRange>();
-  hoveredDate: NgbDate;
+  hoveredDate: NgbDate | null = null;
 
-  private fromDate: NgbDate;
-  private toDate: NgbDate;
-  private min: NgbDate | null;
-  private max: NgbDate | null;
+  private fromDate: NgbDate | null = null;
+  private toDate: NgbDate | null = null;
+  private min: NgbDate | null = null;
+  private max: NgbDate | null = null;
   @ViewChild('dp', { read: ElementRef, static: true })
-  private inputElRef: ElementRef;
+  private inputElRef!: ElementRef;
   @ViewChild('dp', { static: true })
-  private dp: NgbInputDatepicker;
+  private dp!: NgbInputDatepicker;
 
   constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
 
@@ -60,12 +60,12 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
     if (this.fromDate) {
       this.dp.startDate = {
         year: this.fromDate.year,
-        month: this.fromDate.month
+        month: this.fromDate.month,
       };
     }
   }
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.dateRange || changes.disabled) {
+    if (changes['dateRange'] || changes['disabled']) {
       this.ngOnInit();
     }
   }
@@ -100,7 +100,7 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
     return '';
   }
 
-  isHovered(date) {
+  isHovered(date: NgbDate) {
     return (
       this.fromDate &&
       !this.toDate &&
@@ -110,13 +110,14 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
     );
   }
 
-  isInside = date => date.after(this.fromDate) && date.before(this.toDate);
-  isFrom = date => date.equals(this.fromDate);
-  isTo = date => date.equals(this.toDate);
+  isInside = (date: NgbDate) =>
+    date.after(this.fromDate) && date.before(this.toDate);
+  isFrom = (date: NgbDate) => date.equals(this.fromDate);
+  isTo = (date: NgbDate) => date.equals(this.toDate);
   isWeekend(date: NgbDate) {
     const d = new Date(date.year, date.month - 1, date.day);
     return d.getDay() === 0 || d.getDay() === 6;
   }
-  isDisabled = date => date.after(this.max) || date.before(this.min);
-  isInFuture = date => date.after(this.toDate);
+  isDisabled = (date: NgbDate) => date.after(this.max) || date.before(this.min);
+  isInFuture = (date: NgbDate) => date.after(this.toDate);
 }

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

@@ -107,11 +107,10 @@ const isValid = DateRange.isValidDate(new Date());
         return true;
       case 'string':
         return !isNaN(Date.parse(value));
-      case 'object':
+      default:
         if (value instanceof Date) {
           return !isNaN(value.getTime());
         }
-      default:
         return false;
     }
   }

projects/uiowa/date-range-picker/src/lib/services/ngb-date-native-parser-formatter.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import {
   NgbDateParserFormatter,
-  NgbDateStruct
+  NgbDateStruct,
 } from '@ng-bootstrap/ng-bootstrap';
 
 function padNumber(value: number) {
@@ -26,7 +26,7 @@ export class NgbDateNativeParserFormatter extends NgbDateParserFormatter {
     if (value) {
       const dateParts = value.trim().split('/');
       if (dateParts.length === 1 && isNumber(dateParts[0])) {
-        return { year: toInteger(dateParts[0]), month: null, day: null };
+        return { year: toInteger(dateParts[0]), month: 0, day: 0 };
       } else if (
         dateParts.length === 2 &&
         isNumber(dateParts[0]) &&
@@ -35,7 +35,7 @@ export class NgbDateNativeParserFormatter extends NgbDateParserFormatter {
         return {
           year: toInteger(dateParts[1]),
           month: toInteger(dateParts[0]),
-          day: null
+          day: 0,
         };
       } else if (
         dateParts.length === 3 &&
@@ -46,11 +46,11 @@ export class NgbDateNativeParserFormatter extends NgbDateParserFormatter {
         return {
           year: toInteger(dateParts[2]),
           month: toInteger(dateParts[1]),
-          day: toInteger(dateParts[0])
+          day: toInteger(dateParts[0]),
         };
       }
     }
-    return null;
+    return { year: 0, month: 0, day: 0 };
   }
 
   format(date: NgbDateStruct): string {

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { DateRange } from '../../projects/uiowa/date-range-picker/src/public-api
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
   dateRange = new DateRange(new Date(2018, 1, 1), new Date(2018, 1, 31));