feat(datepicker): datepicker fixed for 0-beta.2, closes #120, fixes #38

valor-software · Feb 1, 2016 · 4c3bcab · 4c3bcab
1 parent bdf7d74
commit 4c3bcab
Show file tree

Hide file tree

Showing 17 changed files with 644 additions and 142 deletions.
diff --git a/components/alert/alert.component.spec.ts b/components/alert/alert.component.spec.ts
@@ -16,5 +16,4 @@ describe('Alert', () => {
  it('should have default type', inject([Alert], (alert:Alert) => {
  expect(alert.type).toEqual('warning');
  }));
-
 });
diff --git a/components/datepicker.ts b/components/datepicker.ts
@@ -0,0 +1,18 @@
+/*
+todo: general:
+1. Popup
+2. Keyboard support
+3. custom-class attribute support
+4. date-disabled attribute support
+5. template-url attribute support
+ */
+//import {DatePickerInner} from './datepicker/datepicker-inner';
+import {DatePickerPopup} from './datepicker/datepicker-popup';
+//import {DayPicker} from './datepicker/daypicker';
+//import {MonthPicker} from './datepicker/monthpicker';
+//import {YearPicker} from './datepicker/yearpicker';
+import {DatePicker} from './datepicker/datepicker';
+
+export {DatePickerPopup} from './datepicker/datepicker-popup';
+export {DatePicker} from './datepicker/datepicker';
+export const DATEPICKER_DIRECTIVES:Array<any> = [DatePicker, DatePickerPopup];
diff --git a/components/datepicker/datepicker-inner.ts b/components/datepicker/datepicker-inner.ts
@@ -1,15 +1,8 @@
+import {Component, OnInit, EventEmitter, Input} from 'angular2/core';
 import {
- Component, View, Host,
- OnInit, EventEmitter,
- ElementRef, ViewContainerRef,
- Self, Renderer, Input
-} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES,
- DefaultValueAccessor, NgIf, NgClass, NgModel
+ CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
 } from 'angular2/common';
 
-import * as moment from 'moment';
-
 import {DateFormatter} from './date-formatter';
 
 const FORMAT_DAY:string = 'DD';
@@ -54,9 +47,12 @@ const KEYS = {
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
 })
 export class DatePickerInner implements OnInit {
- @Input() public datepickerMode:string;
- @Input() public startingDay:number;
- @Input() public yearRange:number;
+ @Input()
+ public datepickerMode:string;
+ @Input()
+ public startingDay:number;
+ @Input()
+ public yearRange:number;
  public stepDay:any = {};
  public stepMonth:any = {};
  public stepYear:any = {};
@@ -67,23 +63,38 @@ export class DatePickerInner implements OnInit {
  private _activeDate:Date;
  private _initDate:Date;
  private activeDateId:string;
- @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;
+ @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
- @Input() private customClass:any;
+ @Input()
+ private customClass:any;
  // todo: change type during implementation
- @Input() private dateDisabled:any;
- @Input() private templateUrl:string;
+ @Input()
+ private dateDisabled:any;
+ @Input()
+ private templateUrl:string;
 
  private refreshViewHandlerDay:Function;
  private compareHandlerDay:Function;
@@ -93,15 +104,17 @@ export class DatePickerInner implements OnInit {
  private compareHandlerYear:Function;
  private update:EventEmitter<Date> = new EventEmitter();
 
- @Input() private get initDate():Date {
+ @Input()
+ private get initDate():Date {
  return this._initDate;
  }
 
  private set initDate(value:Date) {
  this._initDate = value;
  }
 
- @Input() private get activeDate():Date {
+ @Input()
+ private get activeDate():Date {
  return this._activeDate;
  }
 

diff --git a/components/datepicker/datepicker-popup.ts b/components/datepicker/datepicker-popup.ts
@@ -1,27 +1,22 @@
 import {
- Component, View, Host, Directive,
+ Component, Directive,
  OnInit, EventEmitter,
  ComponentRef, ViewEncapsulation,
- ElementRef, ViewContainerRef, DynamicComponentLoader,
- Self, Renderer
+ ElementRef, DynamicComponentLoader,
+ Self, Renderer, bind, Injector
 } from 'angular2/core';
 
-import {CORE_DIRECTIVES, FORM_DIRECTIVES,
- DefaultValueAccessor, ControlValueAccessor,
- NgIf, NgClass, NgModel, NgStyle, NgControl
+import {
+ CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel, NgStyle
 } from 'angular2/common';
 
-// import {setProperty} from 'angular2/src/forms/directives/shared';
-// import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {bind, Injectable, forwardRef, ResolvedBinding, Injector} from 'angular2/core';
+import {IAttribute} from '../common';
 import {positionService} from '../position';
-import * as moment from 'moment';
 
-import {DatePickerInner} from './datepicker-inner';
-import {DayPicker} from './daypicker';
-import {MonthPicker} from './monthpicker';
-import {YearPicker} from './yearpicker';
+//import {DatePickerInner} from './datepicker-inner';
+//import {DayPicker} from './daypicker';
+//import {MonthPicker} from './monthpicker';
+//import {YearPicker} from './yearpicker';
 import {DatePicker} from './datepicker';
 
 class PopupOptions {
@@ -34,7 +29,7 @@ class PopupOptions {
  }
 }
 
-const datePickerPopupConfig:Object = {
+const datePickerPopupConfig:IAttribute = {
  datepickerPopup: 'YYYY-MM-dd',
  currentText: 'Today',
  clearText: 'Clear',
@@ -102,13 +97,13 @@ class PopupContainer {
  this.left = '0px';
  let p = positionService
  .positionElements(hostEl.nativeElement,
- this.element.nativeElement.children[0],
- this.placement, false);
+  this.element.nativeElement.children[0],
+  this.placement, false);
  this.top = p.top + 'px';
  }
 
  private getText(key:string):string {
- return this[key + 'Text'] || datePickerPopupConfig[key + 'Text'];
+ return (<IAttribute>this)[key + 'Text'] || datePickerPopupConfig[key + 'Text'];
  }
 
  private isDisabled(date:Date):boolean {
@@ -128,7 +123,8 @@ export class DatePickerPopup implements OnInit {
  private _isOpen:boolean = false;
  private popup:Promise<ComponentRef>;
 
- constructor(@Self() public cd:NgModel, public element:ElementRef, public renderer:Renderer, public loader:DynamicComponentLoader) {
+ constructor(@Self()
+ public cd:NgModel, public element:ElementRef, public renderer:Renderer, public loader:DynamicComponentLoader) {
  this.activeDate = cd.model;
  }
 

diff --git a/components/datepicker/datepicker.ts b/components/datepicker/datepicker.ts
@@ -1,19 +1,15 @@
+import {Component, Self, Input} from 'angular2/core';
 import {
- Component, View, Host,
- EventEmitter,
- ElementRef, ViewContainerRef,
- Self, Renderer,
- QueryList, Query,
- Input
-} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES,
- ControlValueAccessor, NgIf, NgClass, NgModel
+ CORE_DIRECTIVES,
+ FORM_DIRECTIVES,
+ ControlValueAccessor,
+ NgModel
 } from 'angular2/common';
 
 import * as moment from 'moment';
 
 import {DatePickerInner} from './datepicker-inner';
-import {DatePickerPopup} from './datepicker-popup';
+//import {DatePickerPopup} from './datepicker-popup';
 import {DayPicker} from './daypicker';
 import {MonthPicker} from './monthpicker';
 import {YearPicker} from './yearpicker';
@@ -52,34 +48,53 @@ import {YearPicker} from './yearpicker';
 
 export class DatePicker implements ControlValueAccessor {
  private _activeDate:Date;
- @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;
+ @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
- @Input() private dateDisabled:any;
+ @Input()
+ private dateDisabled:any;
  private templateUrl:string;
 
- constructor(@Self() public cd:NgModel) {
+ constructor(@Self()
+ public cd:NgModel) {
  // hack
  cd.valueAccessor = this;
  }
 
- @Input() public get activeDate():Date {
+ @Input()
+ public get activeDate():Date {
  return this._activeDate;
  }
 
@@ -113,8 +128,10 @@ export class DatePicker implements ControlValueAccessor {
 
  }
 
- onChange = (_:any) => {};
- onTouched = () => {};
+ onChange = (_:any) => {
+ };
+ onTouched = () => {
+ };
 
  registerOnChange(fn:(_:any) => {}):void {
  this.onChange = fn;

diff --git a/components/datepicker/daypicker.ts b/components/datepicker/daypicker.ts
@@ -1,12 +1,5 @@
-import {
- Component, View, Host, Directive,
- OnInit, EventEmitter,
- ElementRef, ViewContainerRef,
- Self, Renderer
-} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES,
- DefaultValueAccessor, NgIf, NgClass, NgModel
-} from 'angular2/common';
+import {Component, OnInit} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
 
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {DatePickerInner} from './datepicker-inner';

diff --git a/components/datepicker/index.ts b/components/datepicker/index.ts
diff --git a/demo/components/datepicker/datepicker-demo.ts b/demo/components/datepicker/datepicker-demo.ts
@@ -1,20 +1,19 @@
 /// <reference path="../../../tsd.d.ts" />
 
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 
 import * as moment from 'moment';
-import {datepicker} from '../../../ng2-bootstrap';
+import {DATEPICKER_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
 let template = require('./datepicker-demo.html');
 
 @Component({
  selector: 'datepicker-demo',
  template: template,
- directives: [datepicker, CORE_DIRECTIVES, FORM_DIRECTIVES]
+ directives: [DATEPICKER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
-
 export class DatepickerDemo {
  public dt:Date = new Date();
  private minDate:Date = null;

diff --git a/karma.conf.js b/karma.conf.js
@@ -94,5 +94,5 @@ module.exports = function (config) {
 };
 
 function root(p) {
- path.join(__dirname, p);
+ return path.join(__dirname, p);
 }