Merge pull request #54 from eitchtee/datepicker_today_button

feat(datepicker): bring back today/now button behavior

app/apps/common/widgets/datepicker.py

@@ -3,6 +3,7 @@ import datetime
 from django.forms import widgets
 from django.utils import formats, translation, dates
 from django.utils.formats import get_format
+from django.utils.translation import gettext_lazy as _
 
 from apps.common.utils.django import (
     django_to_python_datetime,
@@ -51,6 +52,7 @@ class AirDatePickerInput(widgets.DateInput):
     def build_attrs(self, base_attrs, extra_attrs=None):
         attrs = super().build_attrs(base_attrs, extra_attrs)
 
+        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-language"] = self._get_current_language()
@@ -134,6 +136,7 @@ class AirDateTimePickerInput(widgets.DateTimeInput):
         )
 
         # Add data attributes for AirDatepicker configuration
+        attrs["data-now-button-txt"] = _("Now")
         attrs["data-timepicker"] = str(self.timepicker).lower()
         attrs["data-auto-close"] = str(self.auto_close).lower()
         attrs["data-clear-button"] = str(self.clear_button).lower()
@@ -187,6 +190,14 @@ class AirMonthYearPickerInput(AirDatePickerInput):
         """Get month names using Django's date translation"""
         return {dates.MONTHS[i]: i for i in range(1, 13)}
 
+    def build_attrs(self, base_attrs, extra_attrs=None):
+        attrs = super().build_attrs(base_attrs, extra_attrs)
+
+        # Add data attributes for AirDatepicker configuration
+        attrs["data-now-button-txt"] = _("Today")
+
+        return attrs
+
     def format_value(self, value):
         """Format the value for display in the widget."""
         if value:

app/locale/pt_BR/LC_MESSAGES/django.po

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-01-20 22:42+0000\n"
+"POT-Creation-Date: 2025-01-21 01:12+0000\n"
-"PO-Revision-Date: 2025-01-20 19:43-0300\n"
+"PO-Revision-Date: 2025-01-20 22:12-0300\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: pt_BR\n"
@@ -321,6 +321,14 @@ msgstr "Erro"
 msgid "Info"
 msgstr "Informação"
 
+#: apps/common/widgets/datepicker.py:55 apps/common/widgets/datepicker.py:197
+msgid "Today"
+msgstr "Hoje"
+
+#: apps/common/widgets/datepicker.py:139
+msgid "Now"
+msgstr "Agora"
+
 #: apps/common/widgets/tom_select.py:10
 msgid "Remove"
 msgstr "Remover"
@@ -1019,7 +1027,15 @@ msgstr "Essa conta está desativada"
 msgid "Default"
 msgstr "Padrão"
 
-#: apps/users/forms.py:115
+#: apps/users/forms.py:85 apps/users/models.py:40
+msgid "Date Format"
+msgstr "Formato de Data"
+
+#: apps/users/forms.py:90 apps/users/models.py:45
+msgid "Datetime Format"
+msgstr "Formato de Data e Hora"
+
+#: apps/users/forms.py:117
 msgid "Save"
 msgstr "Salvar"
 
@@ -1043,14 +1059,6 @@ msgstr "Todas as transações"
 msgid "Calendar"
 msgstr "Calendário"
 
-#: apps/users/models.py:40
-msgid "Date Format"
-msgstr "Formato de Data"
-
-#: apps/users/models.py:45
-msgid "Datetime Format"
-msgstr "Formato de Data e Hora"
-
 #: apps/users/models.py:50 apps/users/models.py:56
 msgid "Auto"
 msgstr "Automático"

frontend/src/application/datepicker.js

@@ -22,6 +22,15 @@ function isMobile() {
 }
 
 window.DatePicker = function createDynamicDatePicker(element) {
+    let todayButton = {
+        content: element.dataset.nowButtonTxt,
+        onClick: (dp) => {
+            let date = new Date();
+            dp.selectDate(date, {updateTime: true});
+            dp.setViewDate(date);
+        }
+    }
+
     let isOnMobile = isMobile();
 
     let baseOpts = {
@@ -30,7 +39,7 @@ window.DatePicker = function createDynamicDatePicker(element) {
         timeFormat: element.dataset.timeFormat,
         timepicker: element.dataset.timepicker === 'true',
         autoClose: element.dataset.autoClose === 'true',
-        buttons: element.dataset.clearButton === 'true' ? ['clear', 'today'] : ['today'],
+        buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
         locale: locales[element.dataset.language],
         onSelect: ({date, formattedDate, datepicker}) => {
             const _event = new CustomEvent("change", {
@@ -87,6 +96,15 @@ window.DatePicker = function createDynamicDatePicker(element) {
 
 
 window.MonthYearPicker = function createDynamicDatePicker(element) {
+    let todayButton = {
+        content: element.dataset.nowButtonTxt,
+        onClick: (dp) => {
+            let date = new Date();
+            dp.selectDate(date, {updateTime: true});
+            dp.setViewDate(date);
+        }
+    }
+
     let isOnMobile = isMobile();
 
     let baseOpts = {
@@ -95,7 +113,7 @@ window.MonthYearPicker = function createDynamicDatePicker(element) {
         minView: 'months',
         dateFormat: 'MMMM yyyy',
         autoClose: element.dataset.autoClose === 'true',
-        buttons: element.dataset.clearButton === 'true' ? ['clear', 'today'] : ['today'],
+        buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
         locale: locales[element.dataset.language],
         onSelect: ({date, formattedDate, datepicker}) => {
             const _event = new CustomEvent("change", {