diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index bec0f23207..1263c98006 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -378,7 +378,8 @@ "selector": "date-range", "settings": { "field": "cm:created", - "dateFormat": "DD-MMM-YY" + "dateFormat": "DD-MMM-YY", + "maxDate": "today" } } }, diff --git a/docs/content-services/components/search-date-range.component.md b/docs/content-services/components/search-date-range.component.md index c0ca08f5d1..e85e75eb64 100644 --- a/docs/content-services/components/search-date-range.component.md +++ b/docs/content-services/components/search-date-range.component.md @@ -39,6 +39,7 @@ Implements a date range [widget](../../../lib/testing/src/lib/core/pages/form/wi | ---- | ---- | ----------- | | field | string | Field to apply the query to. Required value | | dateFormat | string | Date format. Dates used by the datepicker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any date format supported by Moment. Default is 'DD/MM/YYYY'. | +| maxDate | string | A fixed date or the string `"today"` that will set the maximum searchable date. Default is no maximum. | ## Details @@ -50,7 +51,7 @@ in a search query. You can set the date range picker to work with any date format your app requires. You can use any date format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) -in the `dateFormat` setting: +in the `dateFormat` and in the `maxDate` setting: ```json { @@ -64,7 +65,8 @@ in the `dateFormat` setting: "selector": "date-range", "settings": { "field": "cm:created", - "dateFormat": "DD-MMM-YY" + "dateFormat": "DD-MMM-YY", + "maxDate": "02-Mar-20" } } } diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html index f1298dbd32..5815b1c9b0 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html @@ -6,7 +6,7 @@ [errorStateMatcher]="matcher" placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}" [matDatepicker]="fromDatepicker" - [max]="maxDate" + [max]="getFromMaxDate()" (focusout)="onChangedHandler($event, from)" data-automation-id="date-range-from-input"> diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts index 87bfea0f9a..a7c5da6485 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts @@ -29,6 +29,7 @@ describe('SearchDateRangeComponent', () => { let adapter: MomentDateAdapter; const fromDate = '2016-10-16'; const toDate = '2017-10-16'; + const maxDate = '10-Mar-20'; const dateFormatFixture = 'DD-MMM-YY'; setupTestBed({ @@ -151,7 +152,7 @@ describe('SearchDateRangeComponent', () => { it('should show date-format error when Invalid found', async(() => { fixture.detectChanges(); - const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"'); + const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]'); input.value = '10-05-18'; input.dispatchEvent(new Event('focusout')); fixture.detectChanges(); @@ -162,7 +163,7 @@ describe('SearchDateRangeComponent', () => { it('should not show date-format error when valid found', async(() => { fixture.detectChanges(); - const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"'); + const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]'); input.value = '10/10/2018'; input.dispatchEvent(new Event('focusout')); fixture.detectChanges(); @@ -171,4 +172,33 @@ describe('SearchDateRangeComponent', () => { expect(component.getFromValidationMessage()).toBeFalsy(); }); })); + + it('should have no maximum date by default', async(() => { + fixture.detectChanges(); + + expect(fixture.debugElement.nativeElement.querySelector('input[ng-reflect-max]')).toBeNull(); + })); + + it('should be able to set a fixed maximum date', async(() => { + component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: maxDate }; + fixture.detectChanges(); + + const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="Tue Mar 10 2020 23:59:59 GMT+0"]'); + expect(inputs[0]).toBeDefined(); + expect(inputs[0]).not.toBeNull(); + expect(inputs[1]).toBeDefined(); + expect(inputs[1]).not.toBeNull(); + })); + + it('should be able to set the maximum date to today', async(() => { + component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' }; + fixture.detectChanges(); + const today = adapter.today().endOf('day').toString().slice(0, -3); + + const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="' + today + '"]'); + expect(inputs[0]).toBeDefined(); + expect(inputs[0]).not.toBeNull(); + expect(inputs[1]).toBeDefined(); + expect(inputs[1]).not.toBeNull(); + })); }); diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts index c806fb116d..a0a5d24fa7 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts @@ -54,9 +54,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy id: string; settings?: SearchWidgetSettings; context?: SearchQueryBuilderService; - maxDate: any; datePickerDateFormat = DEFAULT_FORMAT_DATE; - + maxDate: any; private onDestroy$ = new Subject(); constructor(private dateAdapter: DateAdapter, @@ -102,7 +101,13 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy to: this.to }); - this.maxDate = this.dateAdapter.today().startOf('day'); + if (this.settings && this.settings.maxDate) { + if (this.settings.maxDate === 'today') { + this.maxDate = this.dateAdapter.today().endOf('day'); + } else { + this.maxDate = moment(this.settings.maxDate).endOf('day'); + } + } } ngOnDestroy() { @@ -161,4 +166,13 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy event.srcElement.click(); } + getFromMaxDate(): any { + let maxDate: string; + if (!this.to.value || this.maxDate && (moment(this.maxDate).isBefore(this.to.value))) { + maxDate = this.maxDate; + } else { + maxDate = moment(this.to.value); + } + return maxDate; + } }