fix(limel-date-picker): change picker value when changing the input

fix #297
Lundalogik · Sep 10, 2019 · 7105483 · 7105483
1 parent 1dc84c4
commit 7105483
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/src/components/date-picker/pickers/MonthPicker.tsx b/src/components/date-picker/pickers/MonthPicker.tsx
@@ -45,6 +45,11 @@ export class MonthPicker extends Picker {
 
     protected handleClose(selectedDates) {
         super.handleClose(selectedDates);
+        this.selectMonth(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value,
+            this.flatpickr
+        );
         this.flatpickr.prevMonthNav.removeEventListener(
             'mousedown',
             this.prevYear

diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
@@ -73,10 +73,23 @@ export abstract class Picker {
     }
 
     protected handleClose(selectedDates) {
-        const date = selectedDates[0]
+        const momentInputDate = moment(
+            this.flatpickr.input.value,
+            this.dateFormat
+        );
+        let pickerDate = selectedDates[0]
             ? new Date(selectedDates[0].toJSON())
             : null;
-        this.change.emit(date);
+        const isSameInput = momentInputDate.isSame(moment(pickerDate));
+        if (!isSameInput) {
+            if (momentInputDate.isValid()) {
+                pickerDate = momentInputDate.toDate();
+                this.flatpickr.setDate(pickerDate);
+            } else {
+                this.flatpickr.clear();
+            }
+        }
+        this.change.emit(pickerDate);
     }
 
     private getMomentLang() {

diff --git a/src/components/date-picker/pickers/QuarterPicker.tsx b/src/components/date-picker/pickers/QuarterPicker.tsx
@@ -46,6 +46,11 @@ export class QuarterPicker extends Picker {
 
     protected handleClose(selectedDates) {
         super.handleClose(selectedDates);
+        this.selectQuarter(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value,
+            this.flatpickr
+        );
         this.flatpickr.prevMonthNav.removeEventListener(
             'mousedown',
             this.prevYear

diff --git a/src/components/date-picker/pickers/YearPicker.tsx b/src/components/date-picker/pickers/YearPicker.tsx
@@ -18,6 +18,7 @@ export class YearPicker extends Picker {
     ) {
         super(dateFormat, language, change);
         this.handleChange = this.handleChange.bind(this);
+        this.handleClose = this.handleClose.bind(this);
         this.handleReady = this.handleReady.bind(this);
     }
 
@@ -36,6 +37,14 @@ export class YearPicker extends Picker {
         this.selectYear(selectedDates, dateString);
     }
 
+    protected handleClose(selectedDates) {
+        super.handleClose(selectedDates);
+        this.selectYear(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value
+        );
+    }
+
     private handleReady(_, __, fp) {
         this.bootstrapYearPicker(fp);
         const inputValue = fp.input.value;