1
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
2
|
import {Observable} from 'rxjs/Observable';
|
3
|
|
4
|
import { Filter, Value, DateValue} from './searchHelperClasses.class';
|
5
|
import {IMyOptions, IMyDateModel} from '../../utils/my-date-picker/interfaces/index';
|
6
|
// import {IMyDateModel} from '../../../utils/my-date-picker/interfaces/my-date-model.interface';
|
7
|
import {Dates} from '../../utils/string-utils.class';
|
8
|
|
9
|
@Component({
|
10
|
selector: 'date-filter',
|
11
|
template: `
|
12
|
|
13
|
<select *ngIf="dateValue.type!='range' " name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >
|
14
|
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
|
15
|
</select>
|
16
|
<div *ngIf="dateValue.type=='range' " class="-row dateFilter" >
|
17
|
|
18
|
<table >
|
19
|
<tr><td>
|
20
|
<select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >
|
21
|
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
|
22
|
</select></td>
|
23
|
<td>
|
24
|
From</td><td style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"
|
25
|
[(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>
|
26
|
</td> <td>
|
27
|
To </td><td style="width: 112px;"> <my-date-picker name="to" [options]="myDatePickerOptions"
|
28
|
[(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>
|
29
|
</table>
|
30
|
</div>
|
31
|
`
|
32
|
|
33
|
})
|
34
|
|
35
|
export class DateFilterComponent {
|
36
|
|
37
|
@Input() dateValue = new DateValue("any");
|
38
|
@Input() filterId;
|
39
|
|
40
|
private myDatePickerOptions: IMyOptions = {
|
41
|
// other options...
|
42
|
dateFormat: 'yyyy-mm-dd',
|
43
|
selectionTxtFontSize: '15px',
|
44
|
height:'28px',
|
45
|
width: '100%',
|
46
|
editableDateField: false,
|
47
|
showClearDateBtn: false
|
48
|
};
|
49
|
|
50
|
// Initialized to specific date (09.10.2018).
|
51
|
public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
52
|
public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
|
53
|
|
54
|
constructor() {
|
55
|
this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
|
56
|
}
|
57
|
updateDefaultRangeDates(df:Date,dt:Date){
|
58
|
this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };
|
59
|
this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };
|
60
|
}
|
61
|
typeChanged(type:string){
|
62
|
this.dateValue.setDatesByType(type);
|
63
|
this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
|
64
|
}
|
65
|
|
66
|
onFromDateChanged(event: IMyDateModel) {
|
67
|
this.dateValue.from = Dates.getDateFromString(event.formatted);
|
68
|
|
69
|
}
|
70
|
onToDateChanged(event: IMyDateModel) {
|
71
|
this.dateValue.to = Dates.getDateFromString(event.formatted);
|
72
|
|
73
|
}}
|