Skip to content

Commit

Permalink
fix(datepicker): upgrade to beta 1, issue #38
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanwebdev @valorkin
amanwebdev authored and valorkin committed Feb 2, 2016
1 parent 8dcfe1f commit b1a5507
Show file tree
Hide file tree
Showing 13 changed files with 148 additions and 173 deletions.
81 changes: 29 additions & 52 deletions components/datepicker/datepicker-inner.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import {
Component, View, Host,
OnInit, EventEmitter,
DefaultValueAccessor,
ElementRef, ViewContainerRef,
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
Self, NgModel, Renderer
Self, Renderer, Input
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
DefaultValueAccessor, NgIf, NgClass, NgModel
} from 'angular2/common';

import * as moment from 'moment';

Expand Down Expand Up @@ -45,68 +46,44 @@ const KEYS = {
@Component({
selector: 'datepicker-inner',
events: ['update'],
properties: [
'activeDate',
'datepickerMode',
'initDate',
'minDate',
'maxDate',
'minMode',
'maxMode',
'showWeeks',
'formatDay',
'formatMonth',
'formatYear',
'formatDayHeader',
'formatDayTitle',
'formatMonthTitle',
'startingDay',
'yearRange',
'shortcutPropagation',
'customClass',
'dateDisabled',
'templateUrl'
]
})
@View({
template: `
<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
<ng-content></ng-content>
</div>
<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
<ng-content></ng-content>
</div>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
})
export class DatePickerInner implements OnInit {
public datepickerMode:string;
public startingDay:number;
public yearRange:number;
@Input() public datepickerMode:string;
@Input() public startingDay:number;
@Input() public yearRange:number;
public stepDay:any = {};
public stepMonth:any = {};
public stepYear:any = {};

private modes:Array<string> = ['day', 'month', 'year'];
private dateFormatter:DateFormatter = new DateFormatter();
private uniqueId:string;
private _initDate:Date;
private _activeDate:Date;
private _initDate:Date;
private activeDateId:string;
private minDate:Date;
private maxDate:Date;
private minMode:string;
private maxMode:string;
private showWeeks:boolean;
private formatDay:string;
private formatMonth:string;
private formatYear:string;
private formatDayHeader:string;
private formatDayTitle:string;
private formatMonthTitle:string;
private shortcutPropagation:boolean;
@Input() private minDate:Date;
@Input() private maxDate:Date;
@Input() private minMode:string;
@Input() private maxMode:string;
@Input() private showWeeks:boolean;
@Input() private formatDay:string;
@Input() private formatMonth:string;
@Input() private formatYear:string;
@Input() private formatDayHeader:string;
@Input() private formatDayTitle:string;
@Input() private formatMonthTitle:string;
@Input() private shortcutPropagation:boolean;
// todo: change type during implementation
private customClass:any;
@Input() private customClass:any;
// todo: change type during implementation
private dateDisabled:any;
private templateUrl:string;
@Input() private dateDisabled:any;
@Input() private templateUrl:string;

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

private get initDate():Date {
@Input() private get initDate():Date {
return this._initDate;
}

private set initDate(value:Date) {
this._initDate = value;
}

private get activeDate():Date {
@Input() private get activeDate():Date {
return this._activeDate;
}

Expand Down Expand Up @@ -287,7 +264,7 @@ export class DatePickerInner implements OnInit {
}

public move(direction:number) {
let expectedStep;
let expectedStep:any;
if (this.datepickerMode === 'day') {
expectedStep = this.stepDay;
}
Expand Down
23 changes: 13 additions & 10 deletions components/datepicker/datepicker-popup.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import {
Component, View, Host, Directive,
OnInit, EventEmitter, NgControl,
DefaultValueAccessor, ComponentRef, ViewEncapsulation, ControlValueAccessor,
OnInit, EventEmitter,
ComponentRef, ViewEncapsulation,
ElementRef, ViewContainerRef, DynamicComponentLoader,
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
Self, NgModel, Renderer, NgStyle
Self, Renderer
} from 'angular2/core';

import {CORE_DIRECTIVES, FORM_DIRECTIVES,
DefaultValueAccessor, ControlValueAccessor,
NgIf, NgClass, NgModel, NgStyle, NgControl
} from 'angular2/common';

// import {setProperty} from 'angular2/src/forms/directives/shared';
// import {DOM} from 'angular2/src/dom/dom_adapter';

Expand Down Expand Up @@ -42,9 +46,7 @@ const datePickerPopupConfig:Object = {

@Component({
selector: 'popup-container',
events: ['update1']
})
@View({
events: ['update1'],
template: `
<ul class="dropdown-menu"
style="display: block"
Expand All @@ -64,24 +66,25 @@ const datePickerPopupConfig:Object = {
directives: [NgClass, NgStyle, DatePicker, FORM_DIRECTIVES, CORE_DIRECTIVES],
encapsulation: ViewEncapsulation.None
})

class PopupContainer {
public popupComp:DatePickerPopup;

private classMap:Object;
private classMap:any;
private top:string;
private left:string;
private display:string;
private placement:string;
private showButtonBar:boolean = true;
private update1:EventEmitter = new EventEmitter();
private update1:EventEmitter<any> = new EventEmitter();

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

public onUpdate($event) {
public onUpdate($event:any) {
console.log('update', $event);
if ($event) {
if (typeof $event !== 'Date') {
Expand Down
105 changes: 47 additions & 58 deletions components/datepicker/datepicker.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import {
Component, View, Host,
EventEmitter,
ControlValueAccessor,
ElementRef, ViewContainerRef,
NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
Self, NgModel, Renderer,
QueryList, Query
Self, Renderer,
QueryList, Query,
Input
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
ControlValueAccessor, NgIf, NgClass, NgModel
} from 'angular2/common';

import * as moment from 'moment';

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

@Component({
selector: 'datepicker[ngModel], [datepicker][ng-model]',
properties: [
'datepickerMode',
'minDate', 'maxDate',
'dateDisabled', 'activeDate',
'showWeeks', 'startingDay',
'initDate',
'minMode', 'maxMode',
'formatDay', 'formatMonth', 'formatYear',
'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
'yearRange',
'shortcutPropagation'
]
})
@View({
template: `
<datepicker-inner [active-date]="activeDate"
<datepicker-inner [activeDate]="activeDate"
(update)="onUpdate($event)"
[datepicker-mode]="datepickerMode"
[init-date]="initDate"
[min-date]="minDate"
[max-date]="maxDate"
[min-mode]="minMode"
[max-mode]="maxMode"
[show-weeks]="showWeeks"
[format-day]="formatDay"
[format-month]="formatMonth"
[format-year]="formatYear"
[format-day-header]="formatDayHeader"
[format-day-title]="formatDayTitle"
[format-month-title]="formatMonthTitle"
[starting-day]="startingDay"
[year-range]="yearRange"
[custom-class]="customClass"
[date-disabled]="dateDisabled"
[template-url]="templateUrl"
[shortcut-propagation]="shortcutPropagation">
[datepickerMode]="datepickerMode"
[initDate]="initDate"
[minDate]="minDate"
[maxDate]="maxDate"
[minMode]="minMode"
[maxMode]="maxMode"
[showWeeks]="showWeeks"
[formatDay]="formatDay"
[formatMonth]="formatMonth"
[formatYear]="formatYear"
[formatDayHeader]="formatDayHeader"
[formatDayTitle]="formatDayTitle"
[formatMonthTitle]="formatMonthTitle"
[startingDay]="startingDay"
[yearRange]="yearRange"
[customClass]="customClass"
[dateDisabled]="dateDisabled"
[templateUrl]="templateUrl"
[shortcutPropagation]="shortcutPropagation">
<daypicker tabindex="0"></daypicker>
<monthpicker tabindex="0"></monthpicker>
<yearpicker tabindex="0"></yearpicker>
</datepicker-inner>
`,
directives: [DatePickerInner, DayPicker, MonthPicker, YearPicker, FORM_DIRECTIVES, CORE_DIRECTIVES]
})

export class DatePicker implements ControlValueAccessor {
private _activeDate:Date;
private datepickerMode:string;
private initDate:Date;
private minDate:Date;
private maxDate:Date;
private minMode:string;
private maxMode:string;
private showWeeks:boolean;
private formatDay:string;
private formatMonth:string;
private formatYear:string;
private formatDayHeader:string;
private formatDayTitle:string;
private formatMonthTitle:string;
private startingDay:number;
private yearRange:number;
private shortcutPropagation:boolean;
@Input() private datepickerMode:string;
@Input() private initDate:Date;
@Input() private minDate:Date;
@Input() private maxDate:Date;
@Input() private minMode:string;
@Input() private maxMode:string;
@Input() private showWeeks:boolean;
@Input() private formatDay:string;
@Input() private formatMonth:string;
@Input() private formatYear:string;
@Input() private formatDayHeader:string;
@Input() private formatDayTitle:string;
@Input() private formatMonthTitle:string;
@Input() private startingDay:number;
@Input() private yearRange:number;
@Input() private shortcutPropagation:boolean;
// todo: change type during implementation
private customClass:any;
// todo: change type during implementation
private dateDisabled:any;
@Input() private dateDisabled:any;
private templateUrl:string;

constructor(@Self() public cd:NgModel) {
// hack
cd.valueAccessor = this;
}

public get activeDate():Date {
@Input() public get activeDate():Date {
return this._activeDate;
}

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

private onUpdate(event) {
private onUpdate(event:any) {
this.writeValue(event);
}

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

}

onChange = (_) => {};
onChange = (_:any) => {};
onTouched = () => {};

registerOnChange(fn:(_:any) => {}):void {
Expand Down
Loading

0 comments on commit b1a5507

Please sign in to comment.