From d4333755228dc367e7c731934f56e3086974e7ab Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Mon, 17 Feb 2025 21:36:11 -0300 Subject: [PATCH] feat(datepicker): disable input and fix toggling dates --- app/apps/common/widgets/datepicker.py | 20 ++++++++++++++++++++ app/apps/transactions/forms.py | 5 +++-- frontend/src/application/datepicker.js | 12 +++++++----- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/app/apps/common/widgets/datepicker.py b/app/apps/common/widgets/datepicker.py index dd54885..2075adc 100644 --- a/app/apps/common/widgets/datepicker.py +++ b/app/apps/common/widgets/datepicker.py @@ -19,6 +19,8 @@ class AirDatePickerInput(widgets.DateInput): format=None, clear_button=True, auto_close=True, + read_only=True, + toggle_selected=None, *args, **kwargs, ): @@ -26,6 +28,10 @@ class AirDatePickerInput(widgets.DateInput): super().__init__(attrs=attrs, format=format, *args, **kwargs) self.clear_button = clear_button self.auto_close = auto_close + self.read_only = read_only + self.toggle_selected = ( + toggle_selected if isinstance(toggle_selected, bool) else self.clear_button + ) @staticmethod def _get_current_language(): @@ -47,9 +53,13 @@ class AirDatePickerInput(widgets.DateInput): attrs["data-now-button-txt"] = _("Today") attrs["data-auto-close"] = str(self.auto_close).lower() attrs["data-clear-button"] = str(self.clear_button).lower() + attrs["data-toggle-selected"] = str(self.toggle_selected).lower() attrs["data-language"] = self._get_current_language() attrs["data-date-format"] = django_to_airdatepicker_datetime(self._get_format()) + if self.read_only: + attrs["readonly"] = True + return attrs def format_value(self, value): @@ -89,6 +99,8 @@ class AirDateTimePickerInput(widgets.DateTimeInput): timepicker=True, clear_button=True, auto_close=True, + read_only=True, + toggle_selected=None, *args, **kwargs, ): @@ -97,6 +109,10 @@ class AirDateTimePickerInput(widgets.DateTimeInput): self.timepicker = timepicker self.clear_button = clear_button self.auto_close = auto_close + self.read_only = read_only + self.toggle_selected = ( + toggle_selected if isinstance(toggle_selected, bool) else self.clear_button + ) @staticmethod def _get_current_language(): @@ -123,11 +139,15 @@ class AirDateTimePickerInput(widgets.DateTimeInput): attrs["data-now-button-txt"] = _("Now") attrs["data-timepicker"] = str(self.timepicker).lower() attrs["data-auto-close"] = str(self.auto_close).lower() + attrs["data-toggle-selected"] = str(self.toggle_selected).lower() attrs["data-clear-button"] = str(self.clear_button).lower() attrs["data-language"] = self._get_current_language() attrs["data-date-format"] = date_format attrs["data-time-format"] = time_format + if self.read_only: + attrs["readonly"] = True + return attrs def format_value(self, value): diff --git a/app/apps/transactions/forms.py b/app/apps/transactions/forms.py index 2878755..7bdb574 100644 --- a/app/apps/transactions/forms.py +++ b/app/apps/transactions/forms.py @@ -63,7 +63,9 @@ class TransactionForm(forms.ModelForm): date = forms.DateField(label=_("Date")) reference_date = forms.DateField( - widget=AirMonthYearPickerInput(), label=_("Reference Date"), required=False + widget=AirMonthYearPickerInput(), + label=_("Reference Date"), + required=False, ) class Meta: @@ -176,7 +178,6 @@ class TransactionForm(forms.ModelForm): ), ) - self.fields["reference_date"].required = False self.fields["date"].widget = AirDatePickerInput(clear_button=False) if self.instance and self.instance.pk: diff --git a/frontend/src/application/datepicker.js b/frontend/src/application/datepicker.js index cfd24e3..2589fe7 100644 --- a/frontend/src/application/datepicker.js +++ b/frontend/src/application/datepicker.js @@ -40,6 +40,7 @@ window.DatePicker = function createDynamicDatePicker(element) { dateFormat: element.dataset.dateFormat, timeFormat: element.dataset.timeFormat, timepicker: element.dataset.timepicker === 'true', + toggleSelected: element.dataset.toggleSelected === 'true', autoClose: element.dataset.autoClose === 'true', buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], locale: locales[element.dataset.language], @@ -96,7 +97,6 @@ window.DatePicker = function createDynamicDatePicker(element) { return new AirDatepicker(element, opts); }; - window.MonthYearPicker = function createDynamicDatePicker(element) { let todayButton = { content: element.dataset.nowButtonTxt, @@ -114,6 +114,7 @@ window.MonthYearPicker = function createDynamicDatePicker(element) { view: 'months', minView: 'months', dateFormat: 'MMMM yyyy', + toggleSelected: element.dataset.toggleSelected === 'true', autoClose: element.dataset.autoClose === 'true', buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], locale: locales[element.dataset.language], @@ -163,8 +164,8 @@ window.MonthYearPicker = function createDynamicDatePicker(element) { let opts = {...baseOpts, ...positionConfig}; if (element.dataset.value) { - opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")]; - opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")]; + opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")]; + opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")]; } return new AirDatepicker(element, opts); }; @@ -186,6 +187,7 @@ window.YearPicker = function createDynamicDatePicker(element) { view: 'years', minView: 'years', dateFormat: 'yyyy', + toggleSelected: element.dataset.toggleSelected === 'true', autoClose: element.dataset.autoClose === 'true', buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton], locale: locales[element.dataset.language], @@ -235,8 +237,8 @@ window.YearPicker = function createDynamicDatePicker(element) { let opts = {...baseOpts, ...positionConfig}; if (element.dataset.value) { - opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")]; - opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")]; + opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")]; + opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")]; } return new AirDatepicker(element, opts); };