Skip to content

Commit b1a5507

Browse files
amanwebdevvalorkin
amanwebdev
authored and
valorkin
committed
fix(datepicker): upgrade to beta 1, issue #38 
1 parent 8dcfe1f commit b1a5507

File tree

13 files changed

+148
-173
lines changed

13 files changed

+148
-173
lines changed

‎components/datepicker/datepicker-inner.ts‎

Lines changed: 29 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {
22
Component, View, Host,
33
OnInit, EventEmitter,
4-
DefaultValueAccessor,
54
ElementRef, ViewContainerRef,
6-
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
7-
Self, NgModel, Renderer
5+
Self, Renderer, Input
86
} from 'angular2/core';
7+
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
8+
DefaultValueAccessor, NgIf, NgClass, NgModel
9+
} from 'angular2/common';
910

1011
import * as moment from 'moment';
1112

@@ -45,68 +46,44 @@ const KEYS = {
4546
@Component({
4647
selector: 'datepicker-inner',
4748
events: ['update'],
48-
properties: [
49-
'activeDate',
50-
'datepickerMode',
51-
'initDate',
52-
'minDate',
53-
'maxDate',
54-
'minMode',
55-
'maxMode',
56-
'showWeeks',
57-
'formatDay',
58-
'formatMonth',
59-
'formatYear',
60-
'formatDayHeader',
61-
'formatDayTitle',
62-
'formatMonthTitle',
63-
'startingDay',
64-
'yearRange',
65-
'shortcutPropagation',
66-
'customClass',
67-
'dateDisabled',
68-
'templateUrl'
69-
]
70-
})
71-
@View({
7249
template: `
73-
<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
74-
<ng-content></ng-content>
75-
</div>
50+
<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
51+
<ng-content></ng-content>
52+
</div>
7653
`,
7754
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
7855
})
7956
export class DatePickerInner implements OnInit {
80-
public datepickerMode:string;
81-
public startingDay:number;
82-
public yearRange:number;
57+
@Input() public datepickerMode:string;
58+
@Input() public startingDay:number;
59+
@Input() public yearRange:number;
8360
public stepDay:any = {};
8461
public stepMonth:any = {};
8562
public stepYear:any = {};
8663

8764
private modes:Array<string> = ['day', 'month', 'year'];
8865
private dateFormatter:DateFormatter = new DateFormatter();
8966
private uniqueId:string;
90-
private _initDate:Date;
9167
private _activeDate:Date;
68+
private _initDate:Date;
9269
private activeDateId:string;
93-
private minDate:Date;
94-
private maxDate:Date;
95-
private minMode:string;
96-
private maxMode:string;
97-
private showWeeks:boolean;
98-
private formatDay:string;
99-
private formatMonth:string;
100-
private formatYear:string;
101-
private formatDayHeader:string;
102-
private formatDayTitle:string;
103-
private formatMonthTitle:string;
104-
private shortcutPropagation:boolean;
70+
@Input() private minDate:Date;
71+
@Input() private maxDate:Date;
72+
@Input() private minMode:string;
73+
@Input() private maxMode:string;
74+
@Input() private showWeeks:boolean;
75+
@Input() private formatDay:string;
76+
@Input() private formatMonth:string;
77+
@Input() private formatYear:string;
78+
@Input() private formatDayHeader:string;
79+
@Input() private formatDayTitle:string;
80+
@Input() private formatMonthTitle:string;
81+
@Input() private shortcutPropagation:boolean;
10582
// todo: change type during implementation
106-
private customClass:any;
83+
@Input() private customClass:any;
10784
// todo: change type during implementation
108-
private dateDisabled:any;
109-
private templateUrl:string;
85+
@Input() private dateDisabled:any;
86+
@Input() private templateUrl:string;
11087

11188
private refreshViewHandlerDay:Function;
11289
private compareHandlerDay:Function;
@@ -116,15 +93,15 @@ export class DatePickerInner implements OnInit {
11693
private compareHandlerYear:Function;
11794
private update:EventEmitter<Date> = new EventEmitter();
11895

119-
private get initDate():Date {
96+
@Input() private get initDate():Date {
12097
return this._initDate;
12198
}
12299

123100
private set initDate(value:Date) {
124101
this._initDate = value;
125102
}
126103

127-
private get activeDate():Date {
104+
@Input() private get activeDate():Date {
128105
return this._activeDate;
129106
}
130107

@@ -287,7 +264,7 @@ export class DatePickerInner implements OnInit {
287264
}
288265

289266
public move(direction:number) {
290-
let expectedStep;
267+
let expectedStep:any;
291268
if (this.datepickerMode === 'day') {
292269
expectedStep = this.stepDay;
293270
}

‎components/datepicker/datepicker-popup.ts‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import {
22
Component, View, Host, Directive,
3-
OnInit, EventEmitter, NgControl,
4-
DefaultValueAccessor, ComponentRef, ViewEncapsulation, ControlValueAccessor,
3+
OnInit, EventEmitter,
4+
ComponentRef, ViewEncapsulation,
55
ElementRef, ViewContainerRef, DynamicComponentLoader,
6-
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
7-
Self, NgModel, Renderer, NgStyle
6+
Self, Renderer
87
} from 'angular2/core';
98

9+
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
10+
DefaultValueAccessor, ControlValueAccessor,
11+
NgIf, NgClass, NgModel, NgStyle, NgControl
12+
} from 'angular2/common';
13+
1014
// import {setProperty} from 'angular2/src/forms/directives/shared';
1115
// import {DOM} from 'angular2/src/dom/dom_adapter';
1216

@@ -42,9 +46,7 @@ const datePickerPopupConfig:Object = {
4246

4347
@Component({
4448
selector: 'popup-container',
45-
events: ['update1']
46-
})
47-
@View({
49+
events: ['update1'],
4850
template: `
4951
<ul class="dropdown-menu"
5052
style="display: block"
@@ -64,24 +66,25 @@ const datePickerPopupConfig:Object = {
6466
directives: [NgClass, NgStyle, DatePicker, FORM_DIRECTIVES, CORE_DIRECTIVES],
6567
encapsulation: ViewEncapsulation.None
6668
})
69+
6770
class PopupContainer {
6871
public popupComp:DatePickerPopup;
6972

70-
private classMap:Object;
73+
private classMap:any;
7174
private top:string;
7275
private left:string;
7376
private display:string;
7477
private placement:string;
7578
private showButtonBar:boolean = true;
76-
private update1:EventEmitter = new EventEmitter();
79+
private update1:EventEmitter<any> = new EventEmitter();
7780

7881
constructor(public element:ElementRef, options:PopupOptions) {
7982
Object.assign(this, options);
8083
this.classMap = {'in': false};
8184
this.classMap[options.placement] = true;
8285
}
8386

84-
public onUpdate($event) {
87+
public onUpdate($event:any) {
8588
console.log('update', $event);
8689
if ($event) {
8790
if (typeof $event !== 'Date') {

‎components/datepicker/datepicker.ts‎

Lines changed: 47 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import {
22
Component, View, Host,
33
EventEmitter,
4-
ControlValueAccessor,
54
ElementRef, ViewContainerRef,
6-
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
7-
Self, NgModel, Renderer,
8-
QueryList, Query
5+
Self, Renderer,
6+
QueryList, Query,
7+
Input
98
} from 'angular2/core';
9+
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
10+
ControlValueAccessor, NgIf, NgClass, NgModel
11+
} from 'angular2/common';
1012

1113
import * as moment from 'moment';
1214

@@ -18,79 +20,66 @@ import {YearPicker} from './yearpicker';
1820

1921
@Component({
2022
selector: 'datepicker[ngModel], [datepicker][ng-model]',
21-
properties: [
22-
'datepickerMode',
23-
'minDate', 'maxDate',
24-
'dateDisabled', 'activeDate',
25-
'showWeeks', 'startingDay',
26-
'initDate',
27-
'minMode', 'maxMode',
28-
'formatDay', 'formatMonth', 'formatYear',
29-
'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
30-
'yearRange',
31-
'shortcutPropagation'
32-
]
33-
})
34-
@View({
3523
template: `
36-
<datepicker-inner [active-date]="activeDate"
24+
<datepicker-inner [activeDate]="activeDate"
3725
(update)="onUpdate($event)"
38-
[datepicker-mode]="datepickerMode"
39-
[init-date]="initDate"
40-
[min-date]="minDate"
41-
[max-date]="maxDate"
42-
[min-mode]="minMode"
43-
[max-mode]="maxMode"
44-
[show-weeks]="showWeeks"
45-
[format-day]="formatDay"
46-
[format-month]="formatMonth"
47-
[format-year]="formatYear"
48-
[format-day-header]="formatDayHeader"
49-
[format-day-title]="formatDayTitle"
50-
[format-month-title]="formatMonthTitle"
51-
[starting-day]="startingDay"
52-
[year-range]="yearRange"
53-
[custom-class]="customClass"
54-
[date-disabled]="dateDisabled"
55-
[template-url]="templateUrl"
56-
[shortcut-propagation]="shortcutPropagation">
26+
[datepickerMode]="datepickerMode"
27+
[initDate]="initDate"
28+
[minDate]="minDate"
29+
[maxDate]="maxDate"
30+
[minMode]="minMode"
31+
[maxMode]="maxMode"
32+
[showWeeks]="showWeeks"
33+
[formatDay]="formatDay"
34+
[formatMonth]="formatMonth"
35+
[formatYear]="formatYear"
36+
[formatDayHeader]="formatDayHeader"
37+
[formatDayTitle]="formatDayTitle"
38+
[formatMonthTitle]="formatMonthTitle"
39+
[startingDay]="startingDay"
40+
[yearRange]="yearRange"
41+
[customClass]="customClass"
42+
[dateDisabled]="dateDisabled"
43+
[templateUrl]="templateUrl"
44+
[shortcutPropagation]="shortcutPropagation">
5745
<daypicker tabindex="0"></daypicker>
5846
<monthpicker tabindex="0"></monthpicker>
5947
<yearpicker tabindex="0"></yearpicker>
6048
</datepicker-inner>
6149
`,
6250
directives: [DatePickerInner, DayPicker, MonthPicker, YearPicker, FORM_DIRECTIVES, CORE_DIRECTIVES]
6351
})
52+
6453
export class DatePicker implements ControlValueAccessor {
6554
private _activeDate:Date;
66-
private datepickerMode:string;
67-
private initDate:Date;
68-
private minDate:Date;
69-
private maxDate:Date;
70-
private minMode:string;
71-
private maxMode:string;
72-
private showWeeks:boolean;
73-
private formatDay:string;
74-
private formatMonth:string;
75-
private formatYear:string;
76-
private formatDayHeader:string;
77-
private formatDayTitle:string;
78-
private formatMonthTitle:string;
79-
private startingDay:number;
80-
private yearRange:number;
81-
private shortcutPropagation:boolean;
55+
@Input() private datepickerMode:string;
56+
@Input() private initDate:Date;
57+
@Input() private minDate:Date;
58+
@Input() private maxDate:Date;
59+
@Input() private minMode:string;
60+
@Input() private maxMode:string;
61+
@Input() private showWeeks:boolean;
62+
@Input() private formatDay:string;
63+
@Input() private formatMonth:string;
64+
@Input() private formatYear:string;
65+
@Input() private formatDayHeader:string;
66+
@Input() private formatDayTitle:string;
67+
@Input() private formatMonthTitle:string;
68+
@Input() private startingDay:number;
69+
@Input() private yearRange:number;
70+
@Input() private shortcutPropagation:boolean;
8271
// todo: change type during implementation
8372
private customClass:any;
8473
// todo: change type during implementation
85-
private dateDisabled:any;
74+
@Input() private dateDisabled:any;
8675
private templateUrl:string;
8776

8877
constructor(@Self() public cd:NgModel) {
8978
// hack
9079
cd.valueAccessor = this;
9180
}
9281

93-
public get activeDate():Date {
82+
@Input() public get activeDate():Date {
9483
return this._activeDate;
9584
}
9685

@@ -99,7 +88,7 @@ export class DatePicker implements ControlValueAccessor {
9988
this.cd.viewToModelUpdate(moment(this.activeDate).toDate());
10089
}
10190

102-
private onUpdate(event) {
91+
private onUpdate(event:any) {
10392
this.writeValue(event);
10493
}
10594

@@ -124,7 +113,7 @@ export class DatePicker implements ControlValueAccessor {
124113

125114
}
126115

127-
onChange = (_) => {};
116+
onChange = (_:any) => {};
128117
onTouched = () => {};
129118

130119
registerOnChange(fn:(_:any) => {}):void {

0 commit comments

Comments
 (0)