Use mdl-date-picker

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts

@@ -15,16 +15,35 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { WidgetComponent } from './../widget.component';
 import * as moment from 'moment';
 
+declare let mdDateTimePicker: any;
+
+function dateCheck(c: AbstractControl) {
+    let startDate = moment(c.get('startDate').value);
+    let endDate = moment(c.get('endDate').value);
+    let result = startDate.isAfter(endDate);
+    return result ? {'greaterThan': true} : null;
+}
+
 @Component({
     moduleId: module.id,
     selector: 'date-range-widget',
     templateUrl: './date-range.widget.html',
     styleUrls: ['./date-range.widget.css']
 })
-export class DateRangeWidget {
+export class DateRangeWidget extends WidgetComponent {
+
+    public static FORMAT_DATE_ACTIVITI: string =  'YYYY-MM-DD';
+
+    @ViewChild('startElement')
+    startElement: any;
+
+    @ViewChild('endElement')
+    endElement: any;
 
     @Input()
     field: any;
@@ -32,18 +51,106 @@ export class DateRangeWidget {
     @Output()
     dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
 
-    constructor() {}
+    dataForm: FormGroup;
 
-    public onDateRangeChanged(startDate: HTMLInputElement, endDate: HTMLInputElement) {
-        if (startDate.validity.valid && endDate.validity.valid) {
-            let dateStart = this.convertMomentDate(startDate.value);
-            let endStart = this.convertMomentDate(endDate.value);
+    dialogStart: any = new mdDateTimePicker.default({
+        type: 'date',
+        future: moment().add(21, 'years')
+    });
+
+    dialogEnd: any = new mdDateTimePicker.default({
+        type: 'date',
+        future: moment().add(21, 'years')
+    });
+
+    debug: boolean = false;
+
+    constructor(public elementRef: ElementRef,
+                private formBuilder: FormBuilder) {
+        super();
+    }
+
+    ngOnInit() {
+        this.initForm();
+        this.initSartDateDialog();
+        this.initEndDateDialog();
+    }
+
+    initForm() {
+        let today = moment().format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+        this.dataForm = this.formBuilder.group({
+            dateRange: this.formBuilder.group({
+                startDate: [today, Validators.required],
+                endDate: [today, Validators.required]
+            }, {validator: dateCheck})
+        });
+        this.dataForm.valueChanges.subscribe(data => this.onValueChanged(data));
+        this.dataForm.controls['dateRange'].valueChanges.subscribe(data => this.onGroupValueChanged(data));
+    }
+
+    initSartDateDialog() {
+        this.dialogStart.trigger = this.startElement.nativeElement;
+
+        let startDateButton = document.getElementById('startDateButton');
+        startDateButton.addEventListener('click', () => {
+            this.dialogStart.toggle();
+        });
+    }
+
+    initEndDateDialog() {
+        this.dialogEnd.trigger = this.endElement.nativeElement;
+
+        let endDateButton = document.getElementById('endDateButton');
+        endDateButton.addEventListener('click', () => {
+            this.dialogEnd.toggle();
+        });
+    }
+
+    onOkStart(inputEl: HTMLInputElement) {
+        let date = this.dialogStart.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+        let dateRange: any = this.dataForm.controls['dateRange'];
+        dateRange.patchValue({
+            startDate: date
+        });
+        let materialElemen: any = inputEl.parentElement;
+        if (materialElemen) {
+            materialElemen.MaterialTextfield.change(date);
+        }
+    }
+
+    onOkEnd(inputEl: HTMLInputElement) {
+        let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+        let dateRange: any = this.dataForm.controls['dateRange'];
+        dateRange.patchValue({
+            endDate: date
+        });
+
+        let materialElemen: any = inputEl.parentElement;
+        if (materialElemen) {
+            materialElemen.MaterialTextfield.change(date);
+        }
+    }
+
+    onGroupValueChanged(data: any) {
+        if (this.dataForm.controls['dateRange'].valid) {
+            let dateRange: any = this.dataForm.controls['dateRange'];
+            let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
+            // let endStart = this.convertMomentDate(this.dataForm.controls['endDate'].value);
+            console.log(dateStart);
+        }
+    }
+
+    onValueChanged(data: any) {
+        if (this.dataForm.valid) {
+            let dateRange: any = this.dataForm.controls['dateRange'];
+            let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
+            let endStart = this.convertMomentDate(dateRange.controls['endDate'].value);
             this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
         }
     }
 
     public convertMomentDate(date: string) {
-        return moment(date, 'DD/MM/YYYY', true).format('YYYY-MM-DD') + 'T00:00:00.000Z';
+        return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
     }
 
 }