✨ feat(today): add shortcut button to today on picker

README.md

@@ -80,6 +80,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
 | showPresetsOnly	  |	If true, the picker will show only preset ranges.	                                    | `boolean` (default: `false`)
 | showYearControls  |	If true, the picker will hide the year navigation controls.	                          | `boolean` (default: `false`)
 | showTimePicker	  |	If true, the picker will show the time picker.	                                      | `boolean` (default: `false`)
+| showToday     	  |	If true, the picker will show a Today button.	                                        | `boolean` (default: `false`)
 | enableFutureDates	|	If true, the picker will allow the user to select future dates.                       | `boolean` (default: `false`)
 | enablePastDates	  |	If disabled, the picker will prevent the user from selecting anything prior to today.	| `boolean` (default: `true`)
 | theme             | The theme name that should be assigned to the theme data-attribute.                   | `string` (default: `''`)

docs/src/App.svelte

@@ -115,6 +115,18 @@
         <td>If <code>true</code>, the picker will hide the year navigation controls.</td>
         <td><code>false</code></td>
       </tr>
+      <tr>
+        <td>showToday</td>
+        <td><code>boolean</code></td>
+        <td>If <code>true</code>, the picker will show the Today action.</td>
+        <td><code>false</code></td>
+      </tr>
+      <tr>
+        <td>todayLabel</td>
+        <td><code>string</code></td>
+        <td>The <code>string</code> containing the Today action label.</td>
+        <td><code>"Today"</code></td>
+      </tr>
       <tr>
         <td>showTimePicker</td>
         <td><code>boolean</code></td>
@@ -336,7 +348,7 @@
     <h3>Single Date</h3>
 
     <div class="example">
-      <SinglePicker />
+      <SinglePicker showToday />
     </div>
 
     <h3>Date Range</h3>

docs/src/examples/single/single.svelte

@@ -8,6 +8,7 @@
   export let enableFutureDates = null;
   export let enablePastDates = null;
   export let enabledDates = [];
+  export let showToday = false;
 
   let startDate = new Date();
   let dateFormat = 'MM/dd/yy';
@@ -40,7 +41,7 @@
   $: formattedStartDate = formatDate(startDate);
 </script>
 
-<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange} {onDateChange}>
+<DatePicker bind:isOpen bind:startDate bind:showToday {...$$props} {onNavigationChange} {onDateChange}>
   <input type="text" bind:value={formattedStartDate} on:change={onChange} on:click={toggleDatePicker} />
 </DatePicker>
 
@@ -72,7 +73,7 @@
   $: formattedStartDate = formatDate(startDate);
 </script>
 
-<DatePicker bind:isOpen bind:startDate${showTimePicker ? ' showTimePicker' : ''}${enabledDates.length ? ' enabledDates={' + JSON.stringify(enabledDates)+'}': ''}${disabledDates.length ? ' disabledDates={' + JSON.stringify(disabledDates)+'}': ''}${enableFutureDates !== null && enableFutureDates ? ' enableFutureDates' : ''}${enablePastDates !== null && !enablePastDates ? ' enablePastDates={false}' : ''}>
+<DatePicker bind:isOpen bind:startDate ${showToday ? 'showToday' : ''}${showTimePicker ? ' showTimePicker' : ''}${enabledDates.length ? ' enabledDates={' + JSON.stringify(enabledDates)+'}': ''}${disabledDates.length ? ' disabledDates={' + JSON.stringify(disabledDates)+'}': ''}${enableFutureDates !== null && enableFutureDates ? ' enableFutureDates' : ''}${enablePastDates !== null && !enablePastDates ? ' enablePastDates={false}' : ''}>
   <input type="text" placeholder="Select date" bind:value={formattedStartDate} on:click={toggleDatePicker} />
 </DatePicker>
 

src/datepicker.d.ts

@@ -155,6 +155,16 @@ export interface DatePickerProps {
    * Determines if the default font "Rubik" should be loaded.
    */
   includeFont?: boolean;
+
+  /**
+   * Determines if the shortcut for Today button is shown
+   */
+  showToday?: boolean;
+
+  /**
+   * The label for the Today button
+   */
+  todayLabel?: boolean;
 }
 
 export interface DatePickerEvents {