Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(datepicker): issue #38 #120

Closed
wants to merge 2 commits into from
+148 −173
Closed

fix(datepicker): issue #38 #120

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab9dd87
fix(datepicker): upgrade to beta 1, issue #38
amanwebdev Feb 1, 2016
bdc4726
Merge remote-tracking branch 'upstream/master'
amanwebdev Feb 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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';

@@ -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;
@@ -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;
}

@@ -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;
}
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';

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

@Component({
selector: 'popup-container',
events: ['update1']
})
@View({
events: ['update1'],
template: `
<ul class="dropdown-menu"
style="display: block"
@@ -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') {
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';

@@ -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;
}

@@ -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);
}

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

}

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

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