diff --git a/CHANGELOG.md b/CHANGELOG.md index 72bf4be..bd15b65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## Next +- Add `initialBrowseDate` prop (@endaaman) + ## 2.16.0 - 2025 Apr 2 - Add `isDisabledDate` prop (@stinger567) diff --git a/src/lib/DateInput.svelte b/src/lib/DateInput.svelte index d675fdd..4d5f710 100644 --- a/src/lib/DateInput.svelte +++ b/src/lib/DateInput.svelte @@ -13,8 +13,8 @@ select: Date }>() - /** Default date to display in picker before value is assigned */ - const defaultDate = new Date() + /** Initial date to show in the calendar when no value is selected */ + export let initialBrowseDate = new Date() // inner date value store for preventing value updates (and also // text updates as a result) when date is unchanged @@ -39,12 +39,12 @@ /** Date value */ export let value: Date | null = null - $: store.set(value ? toValidDate(defaultDate, value, min, max, isDisabledDate) : value) + $: store.set(value ? toValidDate(initialBrowseDate, value, min, max, isDisabledDate) : value) /** The earliest value the user can select */ - export let min = new Date(defaultDate.getFullYear() - 20, 0, 1) + export let min = new Date(initialBrowseDate.getFullYear() - 20, 0, 1) /** The latest value the user can select */ - export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999) + export let max = new Date(initialBrowseDate.getFullYear(), 11, 31, 23, 59, 59, 999) /** Set the input element's ID attribute */ export let id: string | null = null /** Placeholder text to show when input field is empty */ @@ -79,7 +79,7 @@ const result = parse(text, formatTokens, $store) if (result.date !== null) { valid = true - store.set(toValidDate(defaultDate, result.date, min, max, isDisabledDate)) + store.set(toValidDate(initialBrowseDate, result.date, min, max, isDisabledDate)) } else { valid = false } @@ -234,6 +234,7 @@ on:focusout={onFocusOut} on:select={onSelect} bind:value={$store} + {initialBrowseDate} {min} {max} {locale} diff --git a/src/lib/DatePicker.svelte b/src/lib/DatePicker.svelte index 49b8889..5052bc5 100644 --- a/src/lib/DatePicker.svelte +++ b/src/lib/DatePicker.svelte @@ -46,15 +46,15 @@ const todayDate = new Date() - /** Default Date to use */ - const defaultDate = new Date() + /** Initial date to show in the calendar when no value is selected */ + export let initialBrowseDate = new Date() /** Show a time picker with the specified precision */ export let timePrecision: 'minute' | 'second' | 'millisecond' | null = null /** The earliest year the user can select */ - export let min = new Date(defaultDate.getFullYear() - 20, 0, 1) + export let min = new Date(initialBrowseDate.getFullYear() - 20, 0, 1) /** The latest year the user can select */ - export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999) + export let max = new Date(initialBrowseDate.getFullYear(), 11, 31, 23, 59, 59, 999) /** Disallow specific dates */ export let isDisabledDate: ((dateToCheck: Date) => boolean) | null = null @@ -72,7 +72,7 @@ } /** The date shown in the popup when none is selected */ - let browseDate = value ? cloneDate(value) : cloneDate(clampDate(defaultDate, min, max)) + let browseDate = value ? cloneDate(value) : cloneDate(clampDate(initialBrowseDate, min, max)) $: setBrowseDate(value) function setBrowseDate(value: Date | null) { if (browseDate.getTime() !== value?.getTime()) { diff --git a/src/routes/DateInput.svelte b/src/routes/DateInput.svelte index cccf3df..c4baf70 100644 --- a/src/routes/DateInput.svelte +++ b/src/routes/DateInput.svelte @@ -8,6 +8,7 @@ let id: string let placeholder: string let value: Date + let initialBrowseDate: Date let min: Date let max: Date let valid: boolean @@ -33,6 +34,7 @@ slot="left" bind:id bind:value + bind:initialBrowseDate bind:min bind:max bind:placeholder @@ -51,6 +53,7 @@

Props

{value} + diff --git a/src/routes/DatePicker.svelte b/src/routes/DatePicker.svelte index 7a29a77..9393930 100644 --- a/src/routes/DatePicker.svelte +++ b/src/routes/DatePicker.svelte @@ -6,6 +6,7 @@ import { hy, de, nb } from 'date-fns/locale' let value: Date + let initialBrowseDate: Date let min: Date let max: Date let locales = [ @@ -23,6 +24,7 @@

Props

{value} + diff --git a/src/routes/docs/+page.md b/src/routes/docs/+page.md index 661b72c..261a1fb 100644 --- a/src/routes/docs/+page.md +++ b/src/routes/docs/+page.md @@ -29,24 +29,25 @@ The component will not assign a date value until a specific date is selected in

Props

-| Prop | Type | Description | -| :----------------------- | :-------------------------------------------- | :------------------------------------------------------------ | -| `value` | Date \| null | Date value | -| `min` | Date | The earliest value the user can select | -| `max` | Date | The latest value the user can select | -| `placeholder` | string | Placeholder used when date value is null | -| `timePrecision` | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision | -| `id` | string \| null | Set the input element's ID attribute | -| `valid` | bool | Whether the text is valid | -| `format` | string | Format string | -| `visible` | bool | Whether the date popup is visible | -| `disabled` | bool | Disable the input | -| `required` | bool | Require a value to submit form | -| `closeOnSelection` | bool | Close the date popup when a date is selected | -| `browseWithoutSelecting` | bool | Wait with updating the date until a value is selected | -| `dynamicPositioning` | bool | Dynamically postions the date popup to best fit on the screen | -| `locale` | Locale | Locale object for internationalization | -| `isDisabledDate` | ((dateToCheck: Date) => boolean) \| null | Disallow specific dates | +| Prop | Type | Description | +| :----------------------- | :-------------------------------------------- | :------------------------------------------------------------- | +| `value` | Date \| null | Date value | +| `initialBrowseDate` | Date | Initial date to show in the calendar when no value is selected | +| `min` | Date | The earliest value the user can select | +| `max` | Date | The latest value the user can select | +| `placeholder` | string | Placeholder used when date value is null | +| `timePrecision` | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision | +| `id` | string \| null | Set the input element's ID attribute | +| `valid` | bool | Whether the text is valid | +| `format` | string | Format string | +| `visible` | bool | Whether the date popup is visible | +| `disabled` | bool | Disable the input | +| `required` | bool | Require a value to submit form | +| `closeOnSelection` | bool | Close the date popup when a date is selected | +| `browseWithoutSelecting` | bool | Wait with updating the date until a value is selected | +| `dynamicPositioning` | bool | Dynamically postions the date popup to best fit on the screen | +| `locale` | Locale | Locale object for internationalization | +| `isDisabledDate` | ((dateToCheck: Date) => boolean) \| null | Disallow specific dates |

Format string

@@ -69,15 +70,16 @@ The component will not assign a date value until a specific date is selected in

Props

-| Prop | Type | Description | -| :----------------------- | :-------------------------------------------- | :--------------------------------------------------- | -| `value` | Date \| null | Date value | -| `min` | Date | The earliest year the user can select | -| `max` | Date | The latest year the user can select | -| `timePrecision` | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision | -| `locale` | Locale | Locale object for internationalization | -| `browseWithoutSelecting` | bool | Wait with updating the date until a date is selected | -| `isDisabledDate` | ((dateToCheck: Date) => boolean) \| null | Disallow specific dates | +| Prop | Type | Description | +| :----------------------- | :-------------------------------------------- | :------------------------------------------------------------- | +| `value` | Date \| null | Date value | +| `initialBrowseDate` | Date | Initial date to show in the calendar when no value is selected | +| `min` | Date | The earliest year the user can select | +| `max` | Date | The latest year the user can select | +| `timePrecision` | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision | +| `locale` | Locale | Locale object for internationalization | +| `browseWithoutSelecting` | bool | Wait with updating the date until a date is selected | +| `isDisabledDate` | ((dateToCheck: Date) => boolean) \| null | Disallow specific dates |

Date disabling example