paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Allow date dropdowns to use new formatter

Browse Source
This commit is contained in:
Michael Shamoon 2022-03-10 16:48:03 -08:00
parent 0737ea30e8
commit af7ffa3878
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
View File

@ -20,7 +20,7 @@
</div>
<div class="input-group input-group-sm">
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
[(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
<button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
@ -43,7 +43,7 @@
</div>
<div class="input-group input-group-sm">
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
[(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
<button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">

22
src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
View File

@ -4,6 +4,7 @@ import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { SettingsService } from 'src/app/services/settings.service';
import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';
export interface DateSelection {
@ -25,9 +26,11 @@ const LAST_YEAR = 3
]
})
export class DateDropdownComponent implements OnInit, OnDestroy {
private settings: SettingsService
constructor(settings: SettingsService) {
this.datePlaceHolder = settings.getLocalizedDateInputFormat()
this.settings = settings
this.datePlaceHolder = this.settings.getLocalizedDateInputFormat()
}
quickFilters = [
@ -110,6 +113,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
}
onFocusOut() {
this.dateAfter = this.maybePadString(this.dateAfter)
this.dateBefore = this.maybePadString(this.dateBefore)
}
maybePadString(value): string {
// Allow dates to be specified without 'padding' e.g. 2/3
if (!value || value.length == 10) return value; // null or already formatted
if ([',','.','/','-'].some(sep => value.includes(sep))) {
let valArr = value.split(/[\.,\/-]+/)
valArr = valArr.map(segment => segment.padStart(2,'0'))
let dateFormatter = new LocalizedDateParserFormatter(this.settings)
value = dateFormatter.preformatDateInput(valArr.join(''))
}
return value
}
clearBefore() {
this.dateBefore = null
this.onChange()