1
|
import {Component, Input} from '@angular/core';
|
2
|
|
3
|
import {DateValue} from './searchHelperClasses.class';
|
4
|
import {FormControl} from "@angular/forms";
|
5
|
import { MatDatepickerInputEvent } from "@angular/material/datepicker";
|
6
|
|
7
|
@Component({
|
8
|
selector: 'date-filter',
|
9
|
template: `
|
10
|
<div class="">
|
11
|
<mat-select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" class=" matSelection uk-input" [(ngModel)]=dateValue.type [disableOptionCentering]="true" panelClass="matSelectionPanel">
|
12
|
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
|
13
|
</mat-select>
|
14
|
<div *ngIf="dateValue && dateValue.type=='range' ">
|
15
|
<div class=" uk-grid uk-margin-remove-left" >
|
16
|
<div class="uk-padding-remove uk-width-small">
|
17
|
<mat-select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
|
18
|
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
|
19
|
</mat-select>
|
20
|
</div>
|
21
|
<div class="uk-padding-remove uk-margin-small-left" style="">
|
22
|
<mat-form-field class="uk-width-small">
|
23
|
<input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date"
|
24
|
[formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
|
25
|
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
|
26
|
<mat-datepicker #pickerFrom></mat-datepicker>
|
27
|
</mat-form-field>
|
28
|
</div>
|
29
|
<div class="uk-padding-remove uk-margin-small-left" style="">
|
30
|
<mat-form-field class="uk-width-small">
|
31
|
<input matInput [matDatepicker]="pickerTo" placeholder="Choose to date"
|
32
|
[formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
|
33
|
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
|
34
|
<mat-datepicker #pickerTo></mat-datepicker>
|
35
|
</mat-form-field>
|
36
|
</div>
|
37
|
|
38
|
</div>
|
39
|
</div>
|
40
|
</div>
|
41
|
`
|
42
|
|
43
|
})
|
44
|
|
45
|
export class DateFilterComponent {
|
46
|
|
47
|
@Input() dateValue = new DateValue("any");
|
48
|
@Input() filterId;
|
49
|
@Input() validDateFrom: boolean = true;
|
50
|
@Input() validDateTo: boolean = true;
|
51
|
|
52
|
// Initialized to specific date (09.10.2018).
|
53
|
public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
54
|
public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
55
|
public fromDate;
|
56
|
public toDate;
|
57
|
|
58
|
constructor() {
|
59
|
}
|
60
|
|
61
|
ngOnInit() {
|
62
|
this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
|
63
|
}
|
64
|
updateDefaultRangeDates(df:Date,dt:Date){
|
65
|
this.fromDate = new FormControl(df);
|
66
|
this.toDate = new FormControl(dt);
|
67
|
|
68
|
}
|
69
|
typeChanged(type:string){
|
70
|
this.dateValue.setDatesByType(type);
|
71
|
this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
|
72
|
}
|
73
|
|
74
|
|
75
|
fromDateChanged(event: MatDatepickerInputEvent<Date>) {
|
76
|
this.dateValue.from = event.value;
|
77
|
//console.info("FROM: "+Dates.getDateToString(this.dateValue.from));
|
78
|
}
|
79
|
|
80
|
toDateChanged(event: MatDatepickerInputEvent<Date>) {
|
81
|
this.dateValue.to = event.value;
|
82
|
//console.info("TO: "+Dates.getDateToString(this.dateValue.to));
|
83
|
}
|
84
|
}
|