Fix visual clearing of date field

This commit is contained in:
Michael Shamoon 2020-12-13 11:23:21 -08:00
parent bcdbc975d6
commit 1ddad84985
2 changed files with 14 additions and 10 deletions

View File

@ -1,6 +1,6 @@
<div class="btn-group" ngbDropdown role="group">
<button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>
<ng-container *ngIf="_dateBefore || _dateAfter">
<ng-container *ngIf="dateBefore || dateAfter">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>

View File

@ -38,20 +38,24 @@ export class FilterDropdownDateComponent {
ngOnChanges(changes: SimpleChange) {
// this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
let dateString: string
let dateString: string = ''
let dateAfterChange: SimpleChange = changes['dateAfter']
let dateBeforeChange: SimpleChange = changes['dateBefore']
if (dateAfterChange && dateAfterChange.currentValue && this.dpAfter) {
let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
if (this.dpBefore && this.dpAfter) {
let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
dpAfterElRef.nativeElement.value = dateString
} else if (dateBeforeChange && dateBeforeChange.currentValue && this.dpBefore) {
let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
let dpBeforeElRef: ElementRef = this.dpBefore['_elRef']
dateString = `${dateBeforeChange.currentValue.year}-${dateBeforeChange.currentValue.month.toString().padStart(2,'0')}-${dateBeforeChange.currentValue.day.toString().padStart(2,'0')}`
dpBeforeElRef.nativeElement.value = dateString
if (dateAfterChange && dateAfterChange.currentValue) {
let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
} else if (dateBeforeChange && dateBeforeChange.currentValue) {
let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
dateString = `${dateBeforeChange.currentValue.year}-${dateBeforeChange.currentValue.month.toString().padStart(2,'0')}-${dateBeforeChange.currentValue.day.toString().padStart(2,'0')}`
} else {
dpAfterElRef.nativeElement.value = dateString
dpBeforeElRef.nativeElement.value = dateString
}
}
}