diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml index 5105e71..e35e892 100644 --- a/.github/workflows/unit.yml +++ b/.github/workflows/unit.yml @@ -20,7 +20,7 @@ jobs: - name: Checkout repository uses: actions/checkout@v3 - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v3 with: version: 8.11 - name: Install Node @@ -40,7 +40,7 @@ jobs: - name: Run tests run: pnpm test - name: Upload artifacts - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v4 if: failure() with: name: unit-tests diff --git a/README.md b/README.md index 0252f35..b00177d 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d | isMultipane | If true, two calendar months will be shown side-by-side instead of one. | `boolean` (default: `false`) | isOpen | If true, the picker will be shown without user interaction. | `boolean` (default: `false`) | showPresets | If true, the picker will show the preset ranges for selection. | `boolean` (default: `false`) +| 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`) | enableFutureDates | If true, the picker will allow the user to select future dates. | `boolean` (default: `false`) @@ -83,6 +84,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 +164,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; diff --git a/docs/package-lock.json b/docs/package-lock.json index 31f3ca1..503ff7b 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -46,6 +46,12 @@ "vitest": "^0.34.6" } }, + "../../src": { + "extraneous": true + }, + "../src": { + "extraneous": true + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", diff --git a/docs/src/App.svelte b/docs/src/App.svelte index a43dc75..dde758f 100644 --- a/docs/src/App.svelte +++ b/docs/src/App.svelte @@ -1,7 +1,7 @@ + +
+ +
+ +
+ {#if startDate} + {formattedStartDate} - {formattedEndDate} + {:else} + Pick a date + {/if} +
+ {#if startDate} + + + + {/if} +
+ +
+ + + import { DatePicker } from '@svelte-plugins/datepicker'; + import { format } from 'date-fns'; + + const today = new Date(); + + const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000; + + const getDateFromToday = (days) => { + return Date.now() - days * MILLISECONDS_IN_DAY; + }; + + let startDate = getDateFromToday(29); + let endDate = today; + let dateFormat = 'MMM d, yyyy'; + let isOpen = false; + + let formattedStartDate = ''; + + const onClearDates = () => { + startDate = ''; + endDate = ''; + }; + + const onDateChange = (args) => { + console.log(args, 'onDateChange'); + }; + + const toggleDatePicker = () => (isOpen = !isOpen); + const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || ''; + + $: formattedStartDate = formatDate(startDate); + $: formattedEndDate = formatDate(endDate); + + +
+ +
+ +
+ {#if startDate} + {formattedStartDate} - {formattedEndDate} + {:else} + Pick a date + {/if} +
+ {#if startDate} + + + + {/if} +
+ +
+ + +`} /> + + diff --git a/docs/src/examples/range/range.svelte b/docs/src/examples/range/range.svelte index bd9e9b8..5870f03 100644 --- a/docs/src/examples/range/range.svelte +++ b/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} diff --git a/docs/src/examples/single/single.svelte b/docs/src/examples/single/single.svelte index 43bb6b6..cf29c73 100644 --- a/docs/src/examples/single/single.svelte +++ b/docs/src/examples/single/single.svelte @@ -29,10 +29,14 @@ console.log(e, 'onNavigationChange'); }; + const onDateChange = (args) => { + console.log(args, 'onDateChange'); + }; + $: formattedStartDate = formatDate(startDate); - + diff --git a/docs/src/examples/theme/theme.svelte b/docs/src/examples/theme/theme.svelte index b46ffd8..068f905 100644 --- a/docs/src/examples/theme/theme.svelte +++ b/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; + } diff --git a/src/datepicker.snap.js b/src/datepicker.snap.js index a09f92c..1ee0523 100644 --- a/src/datepicker.snap.js +++ b/src/datepicker.snap.js @@ -4,35 +4,35 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
January @@ -40,77 +40,77 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
Mo Tu We Th Fr Sa Su @@ -118,25 +118,25 @@ exports[`Components: DatePicker > should render a date picker with Monday as sta
 
 
Qanuary @@ -614,77 +614,77 @@ exports[`Components: DatePicker > should render a date picker with my custom loc
Au Bo Cu De Eh Fr Ga @@ -692,32 +692,32 @@ exports[`Components: DatePicker > should render a date picker with my custom loc
 
 
 
January @@ -1188,86 +1188,86 @@ exports[`Components: DatePicker > should render a date picker with time selectio
Su Mo Tu We Th Fr Sa @@ -1275,32 +1275,32 @@ exports[`Components: DatePicker > should render a date picker with time selectio
 
 
 
January @@ -1773,52 +1773,52 @@ exports[`Components: DatePicker > should render a date picker without year contr
Su Mo Tu We Th Fr Sa @@ -1826,32 +1826,32 @@ exports[`Components: DatePicker > should render a date picker without year contr
 
 
 
January @@ -2322,77 +2322,77 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
Su Mo Tu We Th Fr Sa @@ -2400,32 +2400,32 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
 
 
 
February @@ -2876,77 +2876,77 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
Su Mo Tu We Th Fr Sa @@ -2954,53 +2954,53 @@ exports[`Components: DatePicker > should render a range picker 1`] = `
 
 
 
 
 
 
January @@ -3477,77 +3483,77 @@ exports[`Components: DatePicker > should render a range picker with presets 1`]
Su Mo Tu We Th Fr Sa @@ -3555,32 +3561,32 @@ exports[`Components: DatePicker > should render a range picker with presets 1`]
 
 
 
January @@ -4051,77 +4057,77 @@ exports[`Components: DatePicker > should render a single datepicker 1`] = `
Su Mo Tu We Th Fr Sa @@ -4129,32 +4135,32 @@ exports[`Components: DatePicker > should render a single datepicker 1`] = `
 
 
 
{/each}
{/if} -
+
-
{monthLabels[startDateMonth]} {startDateYear}
- {#if showYearControls}
- -
{/if} -
- {#if showTimePicker && startDate} + {#if showTimePicker}
(startDate = updateTime('start', startDate))} /> @@ -985,7 +1021,8 @@ on:mouseenter={(e) => onMouseEnter(e, startDateCalendar[weekIndex][dayIndex], startDateMonth, startDateYear)} on:mouseleave={onMouseLeave} - on:click={(e) => onClick(e, startDateCalendar[weekIndex][dayIndex], startDateMonth, startDateYear)} + on:click|preventDefault={(e) => + onClick(e, startDateCalendar[weekIndex][dayIndex], startDateMonth, startDateYear)} class:norange={isRange && tempEndDate === startDate} > {startDateCalendar[weekIndex][dayIndex]} @@ -1000,9 +1037,9 @@
{#if isRange && isMultipane} -
+
- @@ -1010,21 +1047,21 @@ {#if showYearControls}
- -
{/if} -
- {#if showTimePicker && startDate && endDate} + {#if showTimePicker}
(endDate = updateTime('end', endDate))} />
@@ -1055,7 +1092,8 @@ on:mouseenter={(e) => onMouseEnter(e, endDateCalendar[weekIndex][dayIndex], endDateMonth, endDateYear)} on:mouseleave={onMouseLeave} - on:click={(e) => onClick(e, endDateCalendar[weekIndex][dayIndex], endDateMonth, endDateYear)} + on:click|preventDefault={(e) => + onClick(e, endDateCalendar[weekIndex][dayIndex], endDateMonth, endDateYear)} class:norange={isRange && tempEndDate === startDate} > {endDateCalendar[weekIndex][dayIndex]} @@ -1149,6 +1187,7 @@ --datepicker-container-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1); --datepicker-container-font-family: var(--datepicker-font-family); --datepicker-container-left: 0; + --datepicker-container-top: 105%; --datepicker-container-position: absolute; --datepicker-container-width: fit-content; --datepicker-container-zindex: 99; @@ -1450,7 +1489,7 @@ .datepicker .calendars-container.show { display: grid; - top: 105%; + top: var(--datepicker-container-top); } .datepicker .calendars-container.range { @@ -1476,6 +1515,11 @@ padding: var(--datepicker-presets-padding); } + .datepicker .calendars-container.presets .calendar-presets.presets-only { + border-right: 0; + min-width: 100%; + } + .datepicker .calendars-container .calendar-presets button { appearance: none; background-color: var(--datepicker-presets-button-background); @@ -1516,6 +1560,10 @@ width: var(--datepicker-calendar-width); } + .datepicker .calendars-container .calendar.presets-only { + display: none; + } + .datepicker .calendars-container .calendar + .calendar { border-left: var(--datepicker-calendar-split-border); } @@ -1880,4 +1928,10 @@ opacity: 1; } } + + @media only screen and (max-width: 600px) { + .datepicker .calendars-container.presets .calendar-presets:not(.presets-only) { + display: none; + } + }