From 1756f4d618f8a4c163fffaac6e4f41683c2894cf Mon Sep 17 00:00:00 2001 From: Changhui Xu Date: Fri, 7 Jan 2022 13:35:52 -0600 Subject: [PATCH] Release v6.0.0 --- .vscode/settings.json | 5 +++ README.md | 6 ++- cypress/integration/date-range-picker.spec.ts | 6 +-- projects/uiowa/date-range-picker/README.md | 6 ++- .../uiowa/date-range-picker/ng-package.json | 5 +-- .../lib/date-picker/date-picker.component.ts | 15 +++---- .../date-range-picker.component.ts | 41 ++++++++++--------- .../src/lib/models/date-range.ts | 3 +- .../ngb-date-native-parser-formatter.ts | 10 ++--- src/app/app.component.ts | 2 +- 10 files changed, 53 insertions(+), 46 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9b1db35 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "uiowa" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 3f45b05..99589d7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # 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. @@ -8,7 +10,7 @@ Since **v4.0.0**, this library is only compatible with Angular >=10 and ng-boots 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 diff --git a/cypress/integration/date-range-picker.spec.ts b/cypress/integration/date-range-picker.spec.ts index 99bc705..57ae216 100644 --- a/cypress/integration/date-range-picker.spec.ts +++ b/cypress/integration/date-range-picker.spec.ts @@ -1,4 +1,4 @@ -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(() => { @@ -6,7 +6,7 @@ describe('date-range-picker tests', () => { }); 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) diff --git a/projects/uiowa/date-range-picker/README.md b/projects/uiowa/date-range-picker/README.md index 982d860..06caea6 100644 --- a/projects/uiowa/date-range-picker/README.md +++ b/projects/uiowa/date-range-picker/README.md @@ -1,6 +1,8 @@ # 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. @@ -8,7 +10,7 @@ Since **v4.0.0**, this library is only compatible with Angular >=10 and ng-boots 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 diff --git a/projects/uiowa/date-range-picker/ng-package.json b/projects/uiowa/date-range-picker/ng-package.json index c801daf..3818364 100644 --- a/projects/uiowa/date-range-picker/ng-package.json +++ b/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" } } diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts index 1880236..9d2773e 100644 --- a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts +++ b/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(); - 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) { diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts index e429161..d95e9f2 100644 --- a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts +++ b/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(); - 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); } diff --git a/projects/uiowa/date-range-picker/src/lib/models/date-range.ts b/projects/uiowa/date-range-picker/src/lib/models/date-range.ts index dcca917..1f1a4f0 100644 --- a/projects/uiowa/date-range-picker/src/lib/models/date-range.ts +++ b/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; } } diff --git a/projects/uiowa/date-range-picker/src/lib/services/ngb-date-native-parser-formatter.ts b/projects/uiowa/date-range-picker/src/lib/services/ngb-date-native-parser-formatter.ts index 19293a4..0813690 100644 --- a/projects/uiowa/date-range-picker/src/lib/services/ngb-date-native-parser-formatter.ts +++ b/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 { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cc7e08d..280c92f 100644 --- a/src/app/app.component.ts +++ b/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));