Merge pull request #7 from marcossaore/feat/add-date-selected

feat: add onDateSelected to know if component changes period

Author: dysfunc

docs/package-lock.json

@@ -16,6 +16,7 @@ export const defaultConfig = {
   theme: '',
   disabledDates: [],
   onDayClick: () => { },
+  onNavigationChange: () => { },
   showYearControls: true,
   showPresets: false,
   showTimePicker: false,

docs/src/config.js

@@ -85,6 +85,12 @@ export interface DatePickerProps {
    */
   onDayClick?: (event: Object) => void;
 
+  /**
+   * Callback function to handle the navigation click event for months and years
+   * @type {(event: Object) => void}
+   */
+  onNavigationChange?: (event: Object) => void;
+
   /**
    * Indicates whether the date picker should always be shown.
    */

src/datepicker.d.ts

@@ -98,6 +98,12 @@
    */
   export let onDayClick = () => {};
 
+  /**
+   * Callback function to handle the navigation click event for months and years
+   * @type {(event: Object) => void}
+   */
+   export let onNavigationChange = () => {};
+
   /**
    * Indicates whether the date picker should always be shown.
    * @type {boolean}
@@ -334,6 +340,43 @@
     endDateCalendar = endDateCalendar;
   };
 
+  /**
+   * Handles the navigation click event for months and years
+   * @param {string} direction - The direction of the navigation (previous or next).
+   * @param {string} type - The type of navigation (month or year).
+   */
+  const onNavigation = async (direction, type) => {
+    await tick();
+
+    const initial = new Date(defaultYear, defaultMonth);
+    const initialDayOffMonth = '01';
+
+    let current = new Date(startDateYear, startDateMonth);
+    let month = startDateMonth + 1;
+
+    const calendar = isMultipane ? endDateCalendar : startDateCalendar;
+    const lastWeekOfMonth = calendar[calendar.length - 1].filter(Boolean);
+    const lastDayOfMonth = lastWeekOfMonth[lastWeekOfMonth.length - 1];
+
+    const currentPeriod = {
+      start: `${startDateYear}-${month >= 10 ? month : `0${month}`}-${initialDayOffMonth}`,
+      end: `${startDateYear}-${month >= 10 ? month : `0${month}`}-${lastDayOfMonth}`
+    };
+
+    if (isMultipane) {
+      month += 1;
+      currentPeriod.end = `${endDateYear}-${month >= 10 ? month : `0${month}`}-${lastDayOfMonth}`;
+      current = new Date(endDateYear, endDateMonth);
+    }
+
+    onNavigationChange({
+      direction,
+      type,
+      currentPeriod,
+      isPastPeriod: current < initial
+    });
+  }
+
   /**
    * Handles the "to previous month" action in the date picker.
    */
@@ -344,13 +387,16 @@
       startDateMonth = 11;
       startDateYear--;
     }
+
+    onNavigation('previous', 'month');
   };
 
   /**
    * Handles the "to previous year" action in the date picker.
    */
   const toPrevYear = () => {
     startDateYear--;
+    onNavigation('previous', 'year');
   };
 
   /**
@@ -363,13 +409,15 @@
       startDateMonth = 0;
       startDateYear++;
     }
+    onNavigation('next', 'month');
   };
 
   /**
    * Handles the "to next year" action in the date picker.
    */
   const toNextYear = () => {
     startDateYear++;
+    onNavigation('next', 'year');
   };
 
   /**