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

valor-software · Feb 2, 2016 · a3d9e1c · a3d9e1c
1 parent b1a5507
commit a3d9e1c
Show file tree

Hide file tree

Showing 20 changed files with 631 additions and 175 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,69 +48,71 @@ 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() public datepickerMode:string;
+  @Input() public initDate:Date;
+  @Input() public minDate:Date;
+  @Input() public maxDate:Date;
+  @Input() public minMode:string;
+  @Input() public maxMode:string;
+  @Input() public showWeeks:boolean;
+  @Input() public formatDay:string;
+  @Input() public formatMonth:string;
+  @Input() public formatYear:string;
+  @Input() public formatDayHeader:string;
+  @Input() public formatDayTitle:string;
+  @Input() public formatMonthTitle:string;
+  @Input() public startingDay:number;
+  @Input() public yearRange:number;
+  @Input() public shortcutPropagation:boolean;
   // todo: change type during implementation
-  private customClass:any;
+  public customClass:any;
   // todo: change type during implementation
-  @Input() private dateDisabled:any;
-  private templateUrl:string;
+  @Input() public dateDisabled:any;
 
   constructor(@Self() public cd:NgModel) {
     // hack
     cd.valueAccessor = this;
   }
 
+  private _now:Date = new Date();
   @Input() public get activeDate():Date {
-    return this._activeDate;
+    return this._activeDate || this._now;
   }
 
   public set activeDate(value:Date) {
     this._activeDate = value;
-    this.cd.viewToModelUpdate(moment(this.activeDate).toDate());
   }
 
   private onUpdate(event:any) {
     this.writeValue(event);
+    this.cd.viewToModelUpdate(event);
   }
 
+  // todo: support null value
   writeValue(value:any) {
     // todo: fix something sends here new date all the time
-    console.log(value);
     // if (value) {
     //  if (typeof value !== 'Date') {
     //    value = new Date(value);
     //  }
     //
     //  this.activeDate = value;
     // }
-    if (value === this.activeDate) {
+    if (value === this._activeDate) {
       return;
     }
     if (value && value instanceof Date) {
       this.activeDate = value;
       return;
     }
-    this.activeDate = value ? new Date(value) : null;
 
+    this.activeDate = value ? new Date(value) : null;
   }
 
-  onChange = (_:any) => {};
-  onTouched = () => {};
+  onChange = (_:any) => {
+  };
+  onTouched = () => {
+  };
 
   registerOnChange(fn:(_:any) => {}):void {
     this.onChange = fn;
@@ -123,5 +121,4 @@ export class DatePicker implements ControlValueAccessor {
   registerOnTouched(fn:() => {}):void {
     this.onTouched = 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.html b/demo/components/datepicker/datepicker-demo.html
@@ -12,7 +12,7 @@
 </style>
 
 <div>
-  <pre>Selected date is: <em>{{getDate() | date:'fullDate'}}</em></pre>
+  <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
   <h4>Inline</h4>
   <div style="display:inline-block; min-height:290px;">
     <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>