refactor(events): add onDateChange event

Author: dysfunc

README.md

@@ -83,6 +83,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
 ### Events
 | Prop               | Description                                                                           | Default                     |
 | :----------------- | :------------------------------------------------------------------------------------ | :-------------------------- |
+| onDateChange	     | Callback function to handle date change events.	                                     | `function`
 | onDayClick	       | Callback function to handle day click events.	                                       | `function`
 | onNavigationChange | Callback function to handle the navigation click event for months and years           | `function`
 
@@ -162,6 +163,7 @@ DatePicker CSS variables:
   --datepicker-container-font-family: var(--datepicker-font-family);
   --datepicker-container-left: 0;
   --datepicker-container-position: absolute;
+  --datepicker-container-top: 105%;
   --datepicker-container-width: fit-content;
   --datepicker-container-zindex: 99;
 

docs/src/App.svelte

@@ -300,6 +300,12 @@
         <th>Description</th>
         <th>Default</th>
       </tr>
+      <tr>
+        <td>onDateChange</td>
+        <td><code>function</code></td>
+        <td>Callback function to handle when date changes.</td>
+        <td><code>None</code></td>
+      </tr>
       <tr>
         <td>onDayClick</td>
         <td><code>function</code></td>

docs/src/examples/range/range.svelte

@@ -31,6 +31,10 @@
     console.log(e, 'onNavigationChange');
   };
 
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
   const toggleDatePicker = () => (isOpen = !isOpen);
   const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
 
@@ -44,6 +48,7 @@
     bind:startDate
     bind:endDate
     {onNavigationChange}
+    {onDateChange}
     isRange
     {isMultipane}
     {showPresets}

docs/src/examples/single/single.svelte

@@ -29,10 +29,14 @@
     console.log(e, 'onNavigationChange');
   };
 
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
   $: formattedStartDate = formatDate(startDate);
 </script>
 
-<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange}>
+<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange} {onDateChange}>
   <input type="text" bind:value={formattedStartDate} on:change={onChange} on:click={toggleDatePicker} />
 </DatePicker>
 

docs/src/examples/theme/theme.svelte

@@ -209,6 +209,8 @@
     --datepicker-presets-button-color: #fff;
     --datepicker-presets-button-color-active: #fff;
     --datepicker-presets-button-color-hover: #333;
-    --datepicker-presets-button-color-focus: #333
+    --datepicker-presets-button-color-focus: #333;
+    --datepicker-spacing: 90px;
+
   }
 </style>

src/datepicker.svelte

@@ -93,6 +93,13 @@
    */
   export let enabledDates = [];
 
+  /**
+   * Callback function triggered when a date or date range changes.
+   * @type {function}
+   * @default () => {}
+   */
+  export let onDateChange = () => {};
+
   /**
    * Callback function to handle day click events.
    * @type {(event: Object) => void}
@@ -483,7 +490,6 @@
    *
    * @param {number} startDate - The timestamp of the start date.
    * @param {number} endDate - The timestamp of the end date.
-   * @param {string[]} disabled - An array of disabled dates.
    * @returns {string[]} - An array of dates within the specified range.
    */
   const getDatesInRange = (startDate, endDate) => {
@@ -495,10 +501,11 @@
       const formattedDate = `${
         dateRangeStart.getMonth() + 1
       }/${dateRangeStart.getDate()}/${dateRangeStart.getFullYear()}`;
+
       if (
         (!enabled && !disabled) ||
         (enabled.length && enabled.includes(formattedDate)) ||
-        (disabled.length && !disabled.includes(formattedDate))
+        !disabled.includes(formattedDate)
       ) {
         datesInRange.push(formattedDate);
       }
@@ -545,6 +552,10 @@
     };
 
     onDayClick(event);
+
+    if ((isRange && startDate && endDate) || (!isRange && startDate)) {
+      onDateChange(event);
+    }
   };
 
   /**
@@ -772,6 +783,16 @@
     startDate = start;
     endDate = end;
 
+    if (isRange && startDate && endDate) {
+      onDateChange({
+        startDate,
+        startDateTime,
+        endDate,
+        endDateTime,
+        rangeDates: getDatesInRange(startDate, endDate)
+      });
+    }
+
     if (!alwaysShow) {
       isOpen = false;
     }