diff --git a/README.md b/README.md index f201307..3f35c27 100644 --- a/README.md +++ b/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: `''`) diff --git a/docs/src/App.svelte b/docs/src/App.svelte index dde758f..d0132c4 100644 --- a/docs/src/App.svelte +++ b/docs/src/App.svelte @@ -115,6 +115,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 @@ -336,7 +348,7 @@

Single Date

- +

Date Range

diff --git a/docs/src/examples/single/single.svelte b/docs/src/examples/single/single.svelte index 8b5b445..970b25d 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'; @@ -40,7 +41,7 @@ $: formattedStartDate = formatDate(startDate); - + @@ -72,7 +73,7 @@ $: formattedStartDate = formatDate(startDate); - + diff --git a/src/datepicker.d.ts b/src/datepicker.d.ts index fd9d773..48a2432 100644 --- a/src/datepicker.d.ts +++ b/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 { diff --git a/src/datepicker.snap.js b/src/datepicker.snap.js index 1ee0523..ed1e31b 100644 --- a/src/datepicker.snap.js +++ b/src/datepicker.snap.js @@ -1,4592 +1,4591 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Components: DatePicker > should render a date picker with Monday as start of week 1`] = ` - -
-
- -
- -
-
- - - -
- January - - 2020 -
- -
- - - -
- - - -
- - -
- - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - Su - - - - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - -
-   -
- - - - - -
-
- -
-
- - -
- -`; - -exports[`Components: DatePicker > should render a date picker with my custom locale 1`] = ` - -
-
- -
- -
-
- - - -
- Qanuary - - 2020 -
- -
- - - -
- - - -
- - -
- - Au - - - Bo - - - Cu - - - De - - - Eh - - - Fr - - - Ga - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - -
- -`; - -exports[`Components: DatePicker > should render a date picker with time selection 1`] = ` - -
-
- -
- -
-
- - - -
- January - - 2020 -
- -
- - - -
- - - -
- -
- - -
- -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - -
- -`; - -exports[`Components: DatePicker > should render a date picker without year controls 1`] = ` - -
-
- -
- -
-
- - - -
- January - - 2020 -
- - - - -
- - -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - -
- -`; - -exports[`Components: DatePicker > should render a range picker 1`] = ` - -
-
- -
- -
-
- - - -
- January - - 2020 -
- -
- - - -
- - - -
- - -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - - -
- February - - 2020 -
- -
- - - -
- - - -
- - -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- - -
- -`; - -exports[`Components: DatePicker > should render a range picker with presets 1`] = ` - -
-
- -
-
- - - - - - -
- -
-
- - - -
- January - - 2020 -
- -
- - - -
- - - -
- - -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - -
- -`; - -exports[`Components: DatePicker > should render a single datepicker 1`] = ` - -
-
- -
- -
-
- - - -
- January - - 2020 -
- -
- - - -
- - - -
- - -
- - Su - - - Mo - - - Tu - - - We - - - Th - - - Fr - - - Sa - - - - -
-   -
- - -
-   -
- - -
-   -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-   -
- - - - - -
-
- -
-
- - -
- -`; +exports[`Components: DatePicker > should render a date picker with Monday as start of week 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ January + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + Su + + + + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a date picker with my custom locale 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ Qanuary + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Au + + + Bo + + + Cu + + + De + + + Eh + + + Fr + + + Ga + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a date picker with time selection 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ January + + 2020 +
+ +
+ + + +
+ + + +
+ +
+ + +
+ +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a date picker without year controls 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ January + + 2020 +
+ + + + +
+ + +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a range picker 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ January + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + + +
+ February + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a range picker with presets 1`] = ` + +
+
+ +
+
+ + + + + + +
+ +
+
+ + + +
+ January + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + +exports[`Components: DatePicker > should render a single datepicker 1`] = ` + +
+
+ +
+ +
+
+ + + +
+ January + + 2020 +
+ +
+ + + +
+ + + +
+ + +
+ + Su + + + Mo + + + Tu + + + We + + + Th + + + Fr + + + Sa + + + + +
+   +
+ + +
+   +
+ + +
+   +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+   +
+ + + + + +
+
+ +
+
+ + +
+ +`; + diff --git a/src/datepicker.svelte b/src/datepicker.svelte index 8c7bb1d..0ef5ad1 100644 --- a/src/datepicker.svelte +++ b/src/datepicker.svelte @@ -192,6 +192,18 @@ */ export let includeFont = true; + /** + * Determines if the shortcut for Today button is shown + * @type {boolean} + */ + export let showToday = false; + + /** + * The label for the Today button + * @type {string} + */ + export let todayLabel = 'Today'; + /** * The number of milliseconds in a day. * @type {number} @@ -887,6 +899,18 @@ }, []); }; + /** + * Handles the "Today" button click event. + */ + const handleTodayClick = () => { + startDate = new Date(); + endDate = isRange ? startDate : null; + + if (!alwaysShow) { + isOpen = false; + } + }; + if (typeof startOfWeek === 'string') { startOfWeek = parseInt(startOfWeek, 10); } @@ -909,7 +933,14 @@ $: endDateCalendar = calendarize(new Date(endDateYear, endDateMonth), startOfWeek); $: !isRange && (endDate = null); $: disabled = getDatesFromArray(disabledDates); - $: enabled = getDatesFromArray(enabledDates, true); + + $: showTodayAction = + showToday && + !showPresets && + !( + normalizeTimestamp(startDate) === normalizeTimestamp(today) && + normalizeTimestamp(startDate) === normalizeTimestamp(today) + ); $: if (!startDate && !endDate) { startDateYear = Number(defaultYear); @@ -958,7 +989,7 @@ {/each} {/if} -
+
+ {#if showTodayAction} +
+ +
+ {/if} + {#if showTimePicker}
(startDate = updateTime('start', startDate))} /> @@ -1038,7 +1075,7 @@ {#if isRange && isMultipane}
-
+
@@ -1061,6 +1098,12 @@
+ {#if showTodayAction} +
+ +
+ {/if} + {#if showTimePicker}
(endDate = updateTime('end', endDate))} /> @@ -1331,6 +1374,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 */ @@ -1637,6 +1698,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; }