add new parameter defaultDate to flatpickr to decide the default value when selector is opened

This commit is contained in:
Mohamed ABDELLANI
2022-11-23 06:31:30 +01:00
parent abf8d44935
commit 9dc3f2d69e
2 changed files with 21 additions and 3 deletions

View File

@@ -4,7 +4,7 @@
.row.date-range-filter
.alpha.two.columns= label_tag nil, t(:date_range)
.omega.fourteen.columns
= f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true }
= f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "startOfDay" }
%span.range-divider
%i.icon-arrow-right
= f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true }
= f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "endOfDay" }

View File

@@ -17,7 +17,10 @@ import ShortcutButtonsPlugin from "shortcut-buttons-flatpickr";
import labelPlugin from "flatpickr/dist/plugins/labelPlugin/labelPlugin";
export default class extends Flatpickr {
static values = { enableTime: Boolean, mode: String };
/*
* defaultDate (optional): "startOfDay" | "endOfDay"
*/
static values = { enableTime: Boolean, mode: String, defaultDate: String };
static targets = ["start", "end"];
locales = {
ar: ar,
@@ -60,6 +63,9 @@ export default class extends Flatpickr {
open() {
this.fp.element.dispatchEvent(new Event("focus"));
if (!this.fp.selectedDates.length) {
this.setDefaultDateValue();
}
}
onChangeEvent(e) {
if (
@@ -136,4 +142,16 @@ export default class extends Flatpickr {
break;
}
};
setDefaultDateValue() {
if (this.defaultDateValue === "startOfDay") {
this.fp.setDate(moment().startOf("day").format());
} else if (this.defaultDateValue === "endOfDay") {
/*
* We use "startOf('day')" of tomorrow in order to not lose
* the records between [23:59:00 ~ 23:59:59] of today
*/
this.fp.setDate(moment().add(1, "days").startOf("day").format());
}
}
}