Only send event change on valid range (ie. both start and end date)

+ do not refresh data on start date change but only on end date change
This commit is contained in:
Jean-Baptiste Bellet
2022-09-08 16:19:27 +02:00
committed by Konrad
parent ec4d091c2e
commit 6ec3e7ee0c
2 changed files with 6 additions and 3 deletions

View File

@@ -23,7 +23,7 @@
%br
%div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } }
%input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } }
%input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" }
%input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" }
%input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"}
.one.column  
.filter_select{ :class => "three columns" }

View File

@@ -66,8 +66,11 @@ export default class extends Flatpickr {
? this.fp.formatDate(selectedDates[1], this.config.dateFormat)
: "";
// Also, send event to be sure that ng-model is well updated
this.startTarget.dispatchEvent(new Event("change"));
this.endTarget.dispatchEvent(new Event("change"));
// Send event only if range il valid, ie. start and end are not empty
if (this.startTarget.value && this.endTarget.value) {
this.startTarget.dispatchEvent(new Event("change"));
this.endTarget.dispatchEvent(new Event("change"));
}
}
}