-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
datepicker-navigation-select.ts
73 lines (65 loc) · 2.47 KB
/
datepicker-navigation-select.ts
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
import {
Component,
Input,
Output,
EventEmitter,
ChangeDetectionStrategy,
ViewEncapsulation,
AfterViewChecked,
ViewChild,
ElementRef,
Renderer2
} from '@angular/core';
import {NgbDate} from './ngb-date';
import {toInteger} from '../util/util';
import {NgbDatepickerI18n} from './datepicker-i18n';
@Component({
selector: 'ngb-datepicker-navigation-select',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styleUrls: ['./datepicker-navigation-select.scss'],
template: `
<select #month
[disabled]="disabled"
class="custom-select"
i18n-aria-label="@@ngb.datepicker.select-month" aria-label="Select month"
i18n-title="@@ngb.datepicker.select-month" title="Select month"
(change)="changeMonth($event.target.value)">
<option *ngFor="let m of months" [attr.aria-label]="i18n.getMonthFullName(m, date?.year)"
[value]="m">{{ i18n.getMonthShortName(m, date?.year) }}</option>
</select><select #year
[disabled]="disabled"
class="custom-select"
i18n-aria-label="@@ngb.datepicker.select-year" aria-label="Select year"
i18n-title="@@ngb.datepicker.select-year" title="Select year"
(change)="changeYear($event.target.value)">
<option *ngFor="let y of years" [value]="y">{{ i18n.getYearNumerals(y) }}</option>
</select>
`
})
export class NgbDatepickerNavigationSelect implements AfterViewChecked {
@Input() date: NgbDate;
@Input() disabled: boolean;
@Input() months: number[];
@Input() years: number[];
@Output() select = new EventEmitter<NgbDate>();
@ViewChild('month', {static: true, read: ElementRef}) monthSelect: ElementRef;
@ViewChild('year', {static: true, read: ElementRef}) yearSelect: ElementRef;
private _month = -1;
private _year = -1;
constructor(public i18n: NgbDatepickerI18n, private _renderer: Renderer2) {}
changeMonth(month: string) { this.select.emit(new NgbDate(this.date.year, toInteger(month), 1)); }
changeYear(year: string) { this.select.emit(new NgbDate(toInteger(year), this.date.month, 1)); }
ngAfterViewChecked() {
if (this.date) {
if (this.date.month !== this._month) {
this._month = this.date.month;
this._renderer.setProperty(this.monthSelect.nativeElement, 'value', this._month);
}
if (this.date.year !== this._year) {
this._year = this.date.year;
this._renderer.setProperty(this.yearSelect.nativeElement, 'value', this._year);
}
}
}
}