refactor(events): fix import and date cycling; update readme

Author: dysfunc

README.md

@@ -78,6 +78,12 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
 | theme             | The theme name that should be assigned to the theme data-attribute.                   | `string` (default: `''`)
 | presetRanges      | The array of present configs to replace the default set with.                         | `array` (default: [...])
 
+### Events
+| Prop               | Description                                                                           | Default                     |
+| :----------------- | :------------------------------------------------------------------------------------ | :-------------------------- |
+| onDayClick	       | Callback function to handle day click events.	                                       | `function`
+| onNavigationChange | Callback function to handle the navigation click event for months and years           | `function`
+
 ## Theming
 You can customize DatePicker theme using several methods:
 - Assign a theme class name via the `theme` property that includes all of your CSS variables overrides

docs/src/examples/range/range.svelte

@@ -27,6 +27,10 @@
     endDate = '';
   };
 
+  const onNavigationChange = (e) => {
+    console.log(e, 'onNavigationChange');
+  };
+
   const toggleDatePicker = () => (isOpen = !isOpen);
   const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
 
@@ -39,12 +43,13 @@
     bind:isOpen
     bind:startDate
     bind:endDate
+    {onNavigationChange}
     isRange
     {isMultipane}
     {showPresets}
     {...$$restProps}
   >
-    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
+    <div class="date-field" on:click={toggleDatePicker} role="button" tabindex="0" class:open={isOpen}>
       <i class="icon-calendar" />
       <div class="date">
         {#if startDate}
@@ -54,7 +59,7 @@
         {/if}
       </div>
       {#if startDate}
-        <span on:click={onClearDates}>
+        <span role="button" tabindex="0" on:click={onClearDates}>
           <i class="os-icon-x" />
         </span>
       {/if}

docs/src/examples/single/single.svelte

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

src/datepicker.svelte

@@ -1,5 +1,6 @@
 <script>
   // @ts-nocheck
+  import { tick } from 'svelte';
   import { clickOutside } from './actions';
 
   /**
@@ -102,7 +103,7 @@
    * Callback function to handle the navigation click event for months and years
    * @type {(event: Object) => void}
    */
-   export let onNavigationChange = () => {};
+  export let onNavigationChange = () => {};
 
   /**
    * Indicates whether the date picker should always be shown.
@@ -365,6 +366,11 @@
 
     if (isMultipane) {
       month += 1;
+
+      if (month > 11) {
+        month = 1;
+      }
+
       currentPeriod.end = `${endDateYear}-${month >= 10 ? month : `0${month}`}-${lastDayOfMonth}`;
       current = new Date(endDateYear, endDateMonth);
     }
@@ -375,7 +381,7 @@
       currentPeriod,
       isPastPeriod: current < initial
     });
-  }
+  };
 
   /**
    * Handles the "to previous month" action in the date picker.