From dac0f06de67d1985badcffe9371e90f2e373113b Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Sun, 4 Feb 2024 12:33:55 -0800 Subject: [PATCH] feat(today): add shortcut button to today on picker --- README.md | 1 + docs/package-lock.json | 2 +- docs/src/App.svelte | 14 +- docs/src/examples/single/single.svelte | 5 +- src/datepicker.d.ts | 10 + src/datepicker.snap.js | 1432 ++++++++++++------------ src/datepicker.svelte | 86 +- 7 files changed, 832 insertions(+), 718 deletions(-) diff --git a/README.md b/README.md index 9045d74..b3a24c2 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d | showPresets | If true, the picker will show the preset ranges for selection. | `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: `''`) diff --git a/docs/package-lock.json b/docs/package-lock.json index 1ecde65..eb9d940 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -17,7 +17,7 @@ }, "..": { "name": "@svelte-plugins/datepicker", - "version": "1.0.3", + "version": "1.0.4", "dev": true, "license": "MIT", "devDependencies": { diff --git a/docs/src/App.svelte b/docs/src/App.svelte index 2f2e22e..9b60df2 100644 --- a/docs/src/App.svelte +++ b/docs/src/App.svelte @@ -103,6 +103,18 @@ If true, the picker will hide the year navigation controls. false + + showToday + boolean + If true, the picker will show the Today action. + false + + + todayLabel + string + The string containing the Today action label. + "Today" + showTimePicker boolean @@ -318,7 +330,7 @@

Single Date

- +

Date Range

diff --git a/docs/src/examples/single/single.svelte b/docs/src/examples/single/single.svelte index 43bb6b6..1f74935 100644 --- a/docs/src/examples/single/single.svelte +++ b/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'; @@ -32,7 +33,7 @@ $: formattedStartDate = formatDate(startDate); - + @@ -61,7 +62,7 @@ $: formattedStartDate = formatDate(startDate); - + diff --git a/src/datepicker.d.ts b/src/datepicker.d.ts index de1208f..a760f67 100644 --- a/src/datepicker.d.ts +++ b/src/datepicker.d.ts @@ -145,6 +145,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 { diff --git a/src/datepicker.snap.js b/src/datepicker.snap.js index 136d038..c06fa4c 100644 --- a/src/datepicker.snap.js +++ b/src/datepicker.snap.js @@ -4,34 +4,34 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
January @@ -39,74 +39,75 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
+
Mo Tu We Th Fr Sa Su @@ -114,24 +115,24 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
 
 
Qanuary @@ -578,74 +579,75 @@ exports[`Components: DatePicker > should render a date picker with my custom loc
+
Au Bo Cu De Eh Fr Ga @@ -653,31 +655,31 @@ exports[`Components: DatePicker > should render a date picker with my custom loc
 
 
 
January @@ -1117,83 +1119,84 @@ exports[`Components: DatePicker > should render a date picker with time selectio
+
Su Mo Tu We Th Fr Sa @@ -1201,31 +1204,31 @@ exports[`Components: DatePicker > should render a date picker with time selectio
 
 
 
January @@ -1667,51 +1670,52 @@ exports[`Components: DatePicker > should render a date picker without year contr +
Su Mo Tu We Th Fr Sa @@ -1719,31 +1723,31 @@ exports[`Components: DatePicker > should render a date picker without year contr
 
 
 
January @@ -2183,74 +2187,75 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
+
Su Mo Tu We Th Fr Sa @@ -2258,31 +2263,31 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
 
 
 
February @@ -2702,74 +2707,75 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
+
Su Mo Tu We Th Fr Sa @@ -2777,52 +2783,52 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
 
 
 
 
 
 
January @@ -3270,74 +3276,75 @@ exports[`Components: DatePicker > should render a range picker with presets 1`]
+
Su Mo Tu We Th Fr Sa @@ -3345,31 +3352,31 @@ exports[`Components: DatePicker > should render a range picker with presets 1`]
 
 
 
January @@ -3809,74 +3816,75 @@ exports[`Components: DatePicker > should render a single datepicker 1`] = `
+
Su Mo Tu We Th Fr Sa @@ -3884,31 +3892,31 @@ exports[`Components: DatePicker > should render a single datepicker 1`] = `
 
 
 
{/if}
-
+
@@ -944,6 +975,12 @@
+ {#if showTodayAction} +
+ +
+ {/if} + {#if showTimePicker}
(startDate = updateTime('start', startDate))} /> @@ -999,7 +1036,7 @@ {#if isRange && isMultipane}
-
+
@@ -1022,6 +1059,12 @@
+ {#if showTodayAction} +
+ +
+ {/if} + {#if showTimePicker}
(endDate = updateTime('end', endDate))} /> @@ -1289,6 +1332,24 @@ --datepicker-presets-button-text-align: left; --datepicker-presets-button-zindex-focus: 10; + /** + * Today Container + */ + --datepicker-today-container-align-items: center; + --datepicker-today-container-display: flex; + --datepicker-today-container-justify-content: space-around; + --datepicker-today-container-margin-bottom: var(--datepicker-margin-xlarge); + + /** + * Today Button + */ + --datepicker-today-button-background: transparent; + --datepicker-today-button-border: 1px solid var(--datepicker-border-color); + --datepicker-today-button-border-radius: var(--datepicker-border-radius-base); + --datepicker-today-button-cursor: pointer; + --datepicker-today-button-font-size: var(--datepicker-font-size-base); + --datepicker-today-button-padding: var(--datepicker-padding-small) var(--datepicker-padding-base); + /** * Timepicker Container */ @@ -1586,6 +1647,27 @@ background: var(--datepicker-calendar-header-month-nav-background-hover); } + .datepicker .calendars-container .calendar header.today-action { + margin-bottom: 0; + } + + .datepicker .calendars-container .calendar .today-action-button { + align-items: var(--datepicker-today-container-align-items); + display: var(--datepicker-today-container-display); + justify-content: var(--datepicker-today-container-justify-content); + margin-bottom: var(--datepicker-today-container-margin-bottom); + } + + .datepicker .calendars-container .calendar .today-action-button button { + background: var(--datepicker-today-button-background); + border: var(--datepicker-today-button-border); + border-radius: var(--datepicker-today-button-border-radius); + cursor: var(--datepicker-today-button-cursor); + display: var(--datepicker-today-button-display); + font-size: var(--datepicker-today-button-font-size); + padding: var(--datepicker-today-button-padding); + } + .datepicker .calendars-container .calendar header.timepicker { margin-bottom: 0; }