1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
| import { FilterTrafficName } from 'src/app/shared/app/enums';
import { FilterTrafficItem, FiltersLayerWithMode } from '@shared-app/model/filter-traffic.model';
import { FiltersTrafficService } from '@shared-app/store/filters/traffic/filters-traffic.service';
import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { UntypedFormGroup, AbstractControl } from '@angular/forms';
import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
// The hour doesn't convert correctly. The system hour is conserved.
// The date set by component does not change. This is the behavior wished.
import { defineLocale } from 'ngx-bootstrap/chronos';
import { frLocale } from 'ngx-bootstrap/locale';
defineLocale('fr', frLocale);
// Into the constructor : BsLocaleService..use('fr')
/**
* Calendar component.
*/
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CalendarComponent implements OnInit, OnChanges {
/**
* Configuration object for the calendar parameters.
*/
bsConfig: Partial<BsDatepickerConfig> = { isAnimated: true, containerClass: 'theme-orange', rangeInputFormat: 'DD/MM/YYYY', adaptivePosition: true };
/**
* Ref. to the form.
*/
@Input() applyFilterForm: UntypedFormGroup;
/**
* Reinit the calendar binding.
*/
@Input() reinitCalendar: boolean;
/**
* The binding of the current layer.
*/
private pCurrentLayer: FiltersLayerWithMode;
/**
* Ref. to the form control calendar.
*/
calendarControl: AbstractControl;
/**
* Constructor.
*
* @param calendarManager the calendar service
*/
constructor(
private filtersService: FiltersTrafficService,
private bsLocale: BsLocaleService,
private cd: ChangeDetectorRef) {
this.bsLocale.use('fr');
}
/**
* On init comp.
*/
ngOnInit() {
this.calendarControl = this.f.calendarControl;
if (this.filtersService.isDateDefinedIntoCurrentFilterLayer()) {
const [startDate, endDate] = this.filtersService.getDateFromCurrentFilterLayer();
this.calendarControl.setValue([startDate, endDate]);
}
}
/**
* On changes comp attributes.
*/
ngOnChanges(changes: SimpleChanges): void {
const needChanges = changes.reinitCalendar;
if (needChanges && needChanges.previousValue !== needChanges.currentValue && needChanges.currentValue === true) {
if (this.calendarControl) {
this.calendarControl.setValue(null);
}
}
}
get currentLayer() {
return this.pCurrentLayer;
}
@Input()
set currentLayer(layer: FiltersLayerWithMode) {
this.pCurrentLayer = layer;
if (!this.filtersService.isDateDefinedIntoCurrentFilterLayer()) {
return;
}
if (!layer) {
if (this.calendarControl) {
this.calendarControl.setValue(null);
}
} else {
const [startDate, endDate] = this.filtersService.getDateFromCurrentFilterLayer();
this.calendarControl.setValue([startDate, endDate]);
}
this.cd.detectChanges();
}
/**
* Handler when the range date changes.
*
* @param value the new range date
*/
onValueChange(value: Array<Date>) {
if (!value || this.filtersService.isValueEqualsFromCurrent(value)) {
return;
}
this.filtersService.addOrUpdateFilterDateToCurrentLayer(new FilterTrafficItem(0, FilterTrafficName.DATE, value, ''));
}
/**
* Set the previous date.
*/
previousDate() {
const value: Array<Date> = [this.addDays(this.calendarControl.value[0], -1), this.addDays(this.calendarControl.value[1], -1)];
this.calendarControl.setValue(value);
this.filtersService.addOrUpdateFilterDateToCurrentLayer(new FilterTrafficItem(0, FilterTrafficName.DATE, value, ''));
}
/**
* Set the next date.
*/
nextDate() {
const value: Array<Date> = [this.addDays(this.calendarControl.value[0], 1), this.addDays(this.calendarControl.value[1], 1)];
this.calendarControl.setValue(value);
this.filtersService.addOrUpdateFilterDateToCurrentLayer(new FilterTrafficItem(0, FilterTrafficName.DATE, value, ''));
}
/**
* Returns an object reference of the controls of form.
* Each control is accessibe by its name as key and the value returned as a FormControl.
*
* @returns an object of each control of form
*/
get f(): { [key: string]: AbstractControl } {
return this.applyFilterForm.controls;
}
/**
* Add days to the given date.
*
* @param date the date
* @param days the number of days
* @return the new date
*/
private addDays(date: Date, days: number) {
const copy = new Date(+date);
copy.setDate(date.getDate() + days);
return copy;
}
} |
Input Datepicker : réagir au clavier
Répondre avec citation
Partager