From d5dfe5bba08a736460a2bb6dce0e8eab3331b6f8 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Mon, 20 Jan 2025 22:14:36 -0300
Subject: [PATCH] feat(datepicker): bring back today/now button behavior

---
 app/apps/common/widgets/datepicker.py  | 11 +++++++++++
 frontend/src/application/datepicker.js | 22 ++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/apps/common/widgets/datepicker.py b/app/apps/common/widgets/datepicker.py
index 5ed3657..9b54840 100644
--- a/app/apps/common/widgets/datepicker.py
+++ b/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:
diff --git a/frontend/src/application/datepicker.js b/frontend/src/application/datepicker.js
index 2d2c848..f8bfd7e 100644
--- a/frontend/src/application/datepicker.js
+++ b/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", {