feat(DateRangePicker): Fixes, cleanup and separate date-range-picker …

…to its own component

gulpfile.js

@@ -130,9 +130,7 @@ gulp.task('serve', function(){
 });
 
 gulp.task('watch', function () {
-    gulp.watch(paths.source+'/**/*.html', ['views', 'scripts']);
-    gulp.watch(paths.source+'/**/*.ts', ['scripts']);
-    gulp.watch(paths.source+'/**/*.{scss,sass}', ['sass', 'scripts']);
+    gulp.watch(paths.source+'/**/*.*', ['scripts']);
 });
 
 gulp.task('build', ['cleanSass', 'cleanScripts', 'cleanViews', 'sass', 'views', 'scripts', 'bundle']);

src/components/DatePicker/DatePickerMobile.html

@@ -8,16 +8,6 @@
 	</span>
 </div>
 
-<div *ngIf="range" class="input-group" (click)="showCalendar($event)">
-	<input type="text" class="form-control"
-		[(ngModel)]="inputDate" 
-		 #dateField2
-		 />
-	<span class="input-group-addon" [class.input-group-addon-focus]="dateField2.focus">
-		<i class="fa fa-calendar"></i>
-	</span>
-</div>
-
 <div class="date-picker-overlay" aria-hidden="true"
     *ngIf="calendarDisplayed" 
     (click)="hideCalendar()">
@@ -34,9 +24,7 @@
             <i class="fa fa-chevron-left"></i>
         </button>
         <input type="text" class="form-control text-xs-center" 
-            id="startDate" [(ngModel)]="inputDate" />
-        <input type="text" class="form-control text-xs-center" 
-            id="endDate" [(ngModel)]="inputDate" />
+            id="selectedDate" [(ngModel)]="inputDate" />
         <button type="button" class="btn btn-secondary pull-right"
             (click)="scrollNextMonth()">
             <i class="fa fa-chevron-right"></i>

src/components/DatePicker/DatePickerMobile.ts

@@ -4,6 +4,7 @@ import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
 import {DatePickerCalendar} from "./DatePickerCalendar";
 import {INFINITE_SCROLLER_PROVIDERS, InfiniteScroller} from "../InfiniteScroller/InfiniteScroller";
 import {ElementUtils} from "../../Utilities/ElementUtils";
+import {DateRange} from "../../utilities/DateUtils";
 
 @Component({
     selector: "date-picker-mobile"
@@ -29,20 +30,18 @@ export class DatePickerMobile implements OnInit, AfterViewInit {
 	}
 	get maxDate(): Date|string { return this._maxDate; }
 
-    @Input() range: boolean;
-
     @Input() dateFilter: (d: Date) => boolean;
 
     @Output() valueChange = new EventEmitter();
 	@Input()
-	set value(value: string|Date) {
+	set value(value: any) {
 		this._selectedDate = this.handleDateInput(value);
 	}
 
     @ViewChild(InfiniteScroller)
     calendarScroller: InfiniteScroller;
 
-	private _selectedDate: Date;
+	protected _selectedDate: Date;
 	get selectedDate(): Date { return this._selectedDate; };
 	set selectedDate(value: Date) {
 		this._selectedDate = value;
@@ -91,6 +90,9 @@ export class DatePickerMobile implements OnInit, AfterViewInit {
         }
 
         setTimeout(() => {
+            if(this.calendarScroller == null)
+                return;
+
             let scrollToMonth = this.calendarMonths.findIndex((m: Date) => {
                 return m.getFullYear() == this.selectedDate.getFullYear()
                     && m.getMonth() == this.selectedDate.getMonth()
@@ -110,7 +112,7 @@ export class DatePickerMobile implements OnInit, AfterViewInit {
 		});
     }    
 
-    handleDateInput(value: string|Date): Date {
+    handleDateInput(value: any): Date {
 		if(value instanceof Date && !isNaN(value.valueOf()))
 			return value;
 		else

src/components/DatePicker/DateRangePicker.html

@@ -0,0 +1,79 @@
+<div class="input-group" (click)="showCalendar($event)">
+	<input type="text" class="form-control"
+		[(ngModel)]="inputStartDate" 
+		 #dateField1
+		 />
+	<span class="input-group-addon" [class.input-group-addon-focus]="dateField1.focus">
+		<i class="fa fa-calendar"></i>
+	</span>
+</div>
+
+<div class="input-group" (click)="showCalendar($event)">
+	<input type="text" class="form-control"
+		[(ngModel)]="inputEndDate" 
+		 #dateField2
+		 />
+	<span class="input-group-addon" [class.input-group-addon-focus]="dateField2.focus">
+		<i class="fa fa-calendar"></i>
+	</span>
+</div>
+
+<div class="date-picker-overlay" aria-hidden="true"
+    *ngIf="calendarDisplayed" 
+    (click)="hideCalendar()">
+</div>
+
+<section class="date-picker-component" *ngIf="calendarDisplayed">
+<div class="" role="document"
+    [style.top.px]="calendarY"
+    [style.left.px]="calendarX">
+<div class="container p-a-0">
+    <header>
+        <button type="button" class="btn btn-secondary pull-left"
+            (click)="scrollPrevMonth()">
+            <i class="fa fa-chevron-left"></i>
+        </button>
+        <input type="text" class="form-control text-xs-center" 
+            id="startDate" [(ngModel)]="inputDate" />
+        <input type="text" class="form-control text-xs-center" 
+            id="endDate" [(ngModel)]="inputDate" />
+        <button type="button" class="btn btn-secondary pull-right"
+            (click)="scrollNextMonth()">
+            <i class="fa fa-chevron-right"></i>
+        </button>
+        <table class="table m-b-0 days-of-week">
+            <tbody>
+            <tr>
+                <th>S</th>
+                <th>M</th>
+                <th>T</th>
+                <th>W</th>
+                <th>T</th>
+                <th>F</th>
+                <th>S</th>
+            </tr>
+            </tbody>
+        </table>
+    </header>
+    <section class="calendar-container m-a-0">
+        <infinite-scroller
+            (next)="addNextMonth()"
+            (prev)="addPrevMonth()"
+            height="300"
+            distance="100"
+            hideScrollbar="true">
+            <date-picker-calendar scroll-item
+                *ngFor="#month of calendarMonths #i=index" 
+                [id]="i"
+                [minDate]="minDate" [maxDate]="maxDate"
+                [dateFilter]="dateFilter"
+                [currentMonth]="month" 
+                [(selectedDate)]="selectedDate" 
+                (selectedDate)="hideCalendar()">
+                {{i}}
+            </date-picker-calendar>
+        </infinite-scroller>
+    </section>
+</div>
+</div>
+</section>

src/components/DatePicker/DateRangePicker.ts

@@ -1,17 +1,52 @@
-import {Component, View, Input, Output} from 'angular2/core';
-import {EventEmitter, ElementRef, ViewChildren, QueryList} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
-import {DateRange} from '../../utilities/DateUtils.ts';
+import {Component, View, Input, Output} from "angular2/core";
+import {EventEmitter, ElementRef, ViewChildren, QueryList} from "angular2/core";
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
+import {DateRange} from "../../utilities/DateUtils";
+import {DatePickerMobile} from "./DatePickerMobile";
+import {DatePickerCalendar} from "./DatePickerCalendar";
+import {InfiniteScroller, INFINITE_SCROLLER_PROVIDERS} from "../InfiniteScroller/InfiniteScroller";
 
 @Component({
-	selector: 'date-range-picker'
+	selector: "date-range-picker"
 })
 @View({
-	styleUrls: ['components/DatePicker/DateRangePicker.css'],
+	styleUrls: ['components/DatePicker/DatePickerMobile.css'],
 	templateUrl: 'components/DatePicker/DateRangePicker.html',
-	directives: []
+	directives: [DatePickerCalendar, INFINITE_SCROLLER_PROVIDERS, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
-export class DateRangePicker {
-	@Output() startDateChange = new EventEmitter();
+export class DateRangePicker extends DatePickerMobile {
+	@Output() valueChange = new EventEmitter();
+    @Input()
+    set value(value: any) {
+		this._selectedDate = this.handleRangeInput(value).start;
+	}
 
+    private _inputStartDate: string = "";
+	get inputStartDate(): string {return this._inputStartDate};
+	set inputDate(value: string) {
+		this._inputStartDate = value;
+		this._selectedDate = new Date(value);
+	}
+
+    private _inputEndDate: string = "";
+	get inputEndDate(): string {return this._inputEndDate};
+	set inputEndDate(value: string) {
+		this._inputEndDate = value;
+		this._selectedDate = new Date(value);
+	}
+
+    constructor(modal: ElementRef) {
+        super(modal);
+        /*this.modal = modal.nativeElement;
+        this.selectedDate = new Date();
+        if(this.selectedDate < this._minDate)
+            this.selectedDate = this._minDate;*/
+    }
+
+    handleRangeInput(value: any): DateRange {
+		if(value instanceof DateRange)
+			return value;
+		else
+			throw "DateRangePicker error: input is not of type DateRange";
+	}
 }

src/components/components.ts

@@ -1,18 +1,16 @@
 import {ALERT_PROVIDERS, Alert} from "./Alert/Alert";
 import {CAROUSEL_PROVIDERS, Carousel, CarouselItem} from "./Carousel/Carousel";
-import {DatePicker} from "./DatePicker/DatePicker";
 import {DatePickerMobile} from "./DatePicker/DatePickerMobile";
-import {DateField} from "./DatePicker/DateField";
+import {DateRangePicker} from "./DatePicker/DateRangePicker";
 import {MODAL_PROVIDERS, Modal} from "./Modal/Modal";
 import {PAGINATION_PROVIDERS, Pagination} from "./Pagination/Pagination";
 import {INFINITE_SCROLLER_PROVIDERS, InfiniteScroller, ScrollItem} from "./InfiniteScroller/InfiniteScroller";
 
 export var FUELUI_COMPONENT_PROVIDERS = [
 	ALERT_PROVIDERS,
 	CAROUSEL_PROVIDERS,
-	DatePicker,
+	DateRangePicker,
     DatePickerMobile,
-    DateField,
 	MODAL_PROVIDERS,
 	PAGINATION_PROVIDERS,
 	INFINITE_SCROLLER_PROVIDERS

src/demo.ts

@@ -44,21 +44,23 @@ export class Person {
 				(onAnimationEnd)="logEnd()"></div>
 		</div>
 		<h2>DatePicker</h2>
-		<section class="row m-a">
+        <section class="row m-a">
 			<div class="col-md-3">
-				<date-picker 
-					min-date="11/1/2015"
-					max-date="11/1/2016" months="2">
-				</date-picker>
+				<date-picker-mobile
+					minDate="11/1/2015"
+					maxDate="11/12/2016" 
+                    [dateFilter]="dateFilter">
+				</date-picker-mobile>
 			</div>
 		</section>
+        <h2>DateRangePicker</h2>
         <section class="row m-a">
 			<div class="col-md-3">
-				<date-picker-mobile range="true"
+				<date-range-picker
 					minDate="11/1/2015"
 					maxDate="11/12/2016" 
                     [dateFilter]="dateFilter">
-				</date-picker-mobile>
+				</date-range-picker>
 			</div>
 		</section>
 		<h2>Carousel</h2>