Merge pull request #172

feat(datepicker): disable input and fix toggling dates

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):

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:

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["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
-        opts["startDate"] = [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["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
-        opts["startDate"] = [new Date(element.dataset.value  + "T00:00:00")];
+        opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
     }
     return new AirDatepicker(element, opts);
 };