uses the periods that are actually used.

resources/public/js/htmx-disable.js

@@ -267,6 +267,51 @@ const getLastMonthPeriods = (date) => {
     return [currentPeriod, previousYearPeriod];
 };
 
+const getMonthToDatePeriods = () => {
+        date = new Date();
+
+    // Get the first day of the current month
+    const firstDayOfCurrentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+
+    // Get the same period for the previous year
+    const firstDayOfPreviousYearMonth = new Date(firstDayOfCurrentMonth.getFullYear() - 1, firstDayOfCurrentMonth.getMonth(), 1);
+
+    // Create period objects
+    const currentPeriod = {
+        start: formatDateMMDDYYYY(firstDayOfCurrentMonth),
+        end: formatDateMMDDYYYY(date)
+    };
+
+    const previousYearPeriod = {
+        start: formatDateMMDDYYYY(firstDayOfPreviousYearMonth),
+        end: formatDateMMDDYYYY(new Date(firstDayOfPreviousYearMonth.getFullYear(), firstDayOfPreviousYearMonth.getMonth(), date.getDate()))
+    };
+
+    return [currentPeriod, previousYearPeriod];
+};
+
+const getYearToDatePeriods = () => {
+        date = new Date();
+
+    // Get the first day of the current month
+    const firstDayOfCurrentMonth = new Date(date.getFullYear(), 0, 1);
+
+    // Get the same period for the previous year
+    const firstDayOfPreviousYearMonth = new Date(firstDayOfCurrentMonth.getFullYear() - 1, 0, 1);
+
+    // Create period objects
+    const currentPeriod = {
+        start: formatDateMMDDYYYY(firstDayOfCurrentMonth),
+        end: formatDateMMDDYYYY(date)
+    };
+
+    const previousYearPeriod = {
+        start: formatDateMMDDYYYY(firstDayOfPreviousYearMonth),
+        end: formatDateMMDDYYYY(new Date(firstDayOfPreviousYearMonth.getFullYear(), firstDayOfPreviousYearMonth.getMonth(), date.getDate()))
+    };
+
+    return [currentPeriod, previousYearPeriod];
+}
 initMultiDatepicker = function(elem, startingValue) {
     const modalParent = elem.closest('#modal-content');
     if (modalParent) {

src/clj/auto_ap/ssr/components/periods.clj

@@ -52,9 +52,15 @@
                  :content [:div.flex.flex.gap-2
                            (inputs/calendar-input- {:placeholder "12/21/2020" :x-model "source_date"})
                            [:div.flex.flex-col.gap-2
-                            (buttons/a-button- {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} "13 periods")
+                            (buttons/a-button- {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} [:span "13 periods, ending "
-                            (buttons/a-button- {"@click" "periods=[calendarYearPeriod(source_date)]"} "Calendar year")
+                                                                                                            [:span {:x-text "source_date"}]])
+                            (buttons/a-button- {"@click" "periods=[calendarYearPeriod(source_date)]"} [:span "Calendar year ("
+                                                                                                            [:span {:x-text "parseMMDDYYYY(source_date).getFullYear()"}]
+                                                                                                       ")"])
+                            [:hr {:class "h-px my-1 bg-gray-200 border-0 dark:bg-gray-700"} ]
                             (buttons/a-button- {"@click" "periods=getLastMonthPeriods()"} "Last Month")
+                            (buttons/a-button- {"@click" "periods=getMonthToDatePeriods()"} "Month to date")
+                            (buttons/a-button- {"@click" "periods=getYearToDatePeriods()"} "Year to date")
                             (buttons/a-button- {"@click" "periods=[]"} "Clear")]]}
                 {:name "Advanced"
                  :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"