-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
yearpicker.ts
120 lines (106 loc) · 3.97 KB
/
yearpicker.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
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
import {
Component, Host,
OnInit, EventEmitter,
ElementRef, ViewContainerRef,
Self, Renderer
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
DefaultValueAccessor, NgIf, NgClass, NgModel
} from 'angular2/common';
import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
import {DatePickerInner} from './datepicker-inner';
//write an interface for template options
const TEMPLATE_OPTIONS:any = {
bs4: {
YEAR_BUTTON: `
<button type="button" style="min-width:100%;" class="btn btn-default"
[ngClass]="{'btn-info': dtz.selected, 'btn-link': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled}"
[disabled]="dtz.disabled"
(click)="datePicker.select(dtz.date)" tabindex="-1">
<span [ngClass]="{'text-success': dtz.current}">{{dtz.label}}</span>
</button>
`
},
bs3: {
YEAR_BUTTON: `
<button type="button" style="min-width:100%;" class="btn btn-default"
[ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
[disabled]="dtz.disabled"
(click)="datePicker.select(dtz.date)" tabindex="-1">
<span [ngClass]="{'text-info': dtz.current}">{{dtz.label}}</span>
</button>
`
}
};
const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
@Component({
selector: 'yearpicker, [yearpicker]',
template: `
<table *ngIf="datePicker.datepickerMode==='year'" role="grid">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-sm pull-left"
(click)="datePicker.move(-1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</th>
<th colspan="3">
<button [id]="uniqueId + '-title'" role="heading"
type="button" class="btn btn-default btn-sm"
(click)="datePicker.toggleMode()"
[disabled]="datePicker.datepickerMode === datePicker.maxMode"
[ngClass]="{disabled: datePicker.datepickerMode === datePicker.maxMode}" tabindex="-1" style="width:100%;">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-sm pull-right"
(click)="datePicker.move(1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rowz of rows">
<td *ngFor="#dtz of rowz" class="text-center" role="gridcell">
${CURRENT_THEME_TEMPLATE.YEAR_BUTTON}
</td>
</tr>
</tbody>
</table>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
})
export class YearPicker implements OnInit {
private title:string;
private rows:Array<any> = [];
constructor(public datePicker:DatePickerInner) {
}
private getStartingYear(year:number) {
// todo: parseInt
return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
}
ngOnInit() {
let self = this;
this.datePicker.stepYear = {years: this.datePicker.yearRange};
this.datePicker.setRefreshViewHandler(function () {
let years:Array<any> = new Array(this.yearRange);
let date:Date;
for (let i = 0, start = self.getStartingYear(this.activeDate.getFullYear()); i < this.yearRange; i++) {
date = new Date(start + i, 0, 1);
this.fixTimeZone(date);
years[i] = this.createDateObject(date, this.formatYear);
years[i].uid = this.uniqueId + '-' + i;
}
self.title = [years[0].label, years[this.yearRange - 1].label].join(' - ');
self.rows = this.split(years, 5);
}, 'year');
this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
return date1.getFullYear() - date2.getFullYear();
}, 'year');
this.datePicker.refreshView();
}
// todo: key events implementation
}