Merge pull request #453 from rudolpho1/master

Send change event on date picker input change

Author: zvonimirfras

src/datepicker-input/datepicker-input.component.ts

@@ -1,4 +1,9 @@
-import { Component, Input } from "@angular/core";
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter
+} from "@angular/core";
 
 @Component({
 	selector: "ibm-date-picker-input",
@@ -28,6 +33,7 @@ import { Component, Input } from "@angular/core";
 						fill-rule="nonzero"/>
 				</svg>
 				<input
+				    #dateInput
 					*ngIf="!skeleton"
 					autocomplete="off"
 					type="text"
@@ -38,7 +44,8 @@ import { Component, Input } from "@angular/core";
 					[attr.data-input] = "type == 'single' || type == 'range' ?  '' : null"
 					[id]= "id"
 					[attr.disabled]="(disabled ? '' : null)"
-					[attr.data-invalid]="(invalid ? '' : null)"/>
+					[attr.data-invalid]="(invalid ? '' : null)"
+					(change) = "valueChange.emit(dateInput.value)"/>
 					<div *ngIf="invalid" class="bx--form-requirement">
 						{{invalidText}}
 					</div>
@@ -78,7 +85,9 @@ export class DatePickerInput {
 
 	@Input() placeholder = "mm/dd/yyyy";
 
-	@Input() pattern = "\d{1,2}/\d{1,2}/\d{4}";
+	@Input() pattern = "\\d{1,2}/\\d{1,2}/\\d{4}";
+
+	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	@Input() theme: "light" | "dark" = "dark";
 

src/datepicker/datepicker.component.ts

@@ -7,9 +7,9 @@ import {
 	OnDestroy
 } from "@angular/core";
 import { FlatpickrOptions } from "ng2-flatpickr";
+import flatpickr from "flatpickr";
 import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
-
 @Component({
 	selector: "ibm-date-picker",
 	template: `
@@ -41,7 +41,7 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 							[invalid]="invalid"
 							[invalidText]="invalidText"
 							[skeleton]="skeleton"
-							(valueChange)="valueChange.emit($event)">
+							(valueChange)="onInputValueChange($event, 0)">
 						</ibm-date-picker-input>
 					</div>
 
@@ -57,7 +57,7 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 							[invalid]="invalid"
 							[invalidText]="invalidText"
 							[skeleton]="skeleton"
-							(valueChange)="valueChange.emit($event)">
+							(valueChange)="onInputValueChange($event, 1)">
 						</ibm-date-picker-input>
 					</div>
 				</div>
@@ -87,11 +87,11 @@ export class DatePicker implements OnDestroy {
 
 	@Input() placeholder = "mm/dd/yyyy";
 
-	@Input() pattern = "\d{1,2}/\d{1,2}/\d{4}";
+	@Input() pattern = "\\d{1,2}/\\d{1,2}/\\d{4}";
 
 	@Input() id = `datepicker-${DatePicker.datePickerCount++}`;
 
-	@Input() value: Array<any>;
+	@Input() value: Array<any> = [];
 
 	@Input() theme: "light" | "dark" = "dark";
 
@@ -175,6 +175,22 @@ export class DatePicker implements OnDestroy {
 		});
 	}
 
+	onInputValueChange(event: string, index: number): void {
+		const eventDate = flatpickr.parseDate(event, this.dateFormat, true);
+		const previousDate = flatpickr.parseDate(this.value[index], this.dateFormat, true);
+		if (eventDate) {
+			if (!previousDate || previousDate.getTime() !== eventDate.getTime()) {
+				this.value = [...this.value];
+				this.value[index] = eventDate;
+			}
+		} else {
+			if (previousDate || event) {
+				this.value = [...this.value];
+				this.value[index] = undefined;
+			}
+		}
+	}
+
 	ngOnDestroy() {
 		// clean up our flatpickr element - needed because the wrapper doesn't handle this
 		const ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(".ng2-flatpickr-input-container");