Skip to content

Add initialBrowseDate prop #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
probablykasper merged 6 commits into from
Nov 28, 2025
Merged

Add initialBrowseDate prop #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3e48cd8
Add defaultDate as new prop
endaaman Oct 29, 2025
7577f51
Update demo/docs
endaaman Oct 29, 2025
1b54464
Rename defaultDate -> initialBrowseDate
endaaman Nov 4, 2025
65c56cc
Add explicit description
endaaman Nov 4, 2025
9929f19
Fix markdown style
endaaman Nov 4, 2025
c1588c4
Update CHANGELOG.md
probablykasper Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Changelog

## Next
- Add `initialBrowseDate` prop (@endaaman)

## 2.16.0 - 2025 Apr 2
- Add `isDisabledDate` prop (@stinger567)

Expand Down
13 changes: 7 additions & 6 deletions src/lib/DateInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 */
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -234,6 +234,7 @@
on:focusout={onFocusOut}
on:select={onSelect}
bind:value={$store}
{initialBrowseDate}
{min}
{max}
{locale}
Expand Down
10 changes: 5 additions & 5 deletions src/lib/DatePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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()) {
Expand Down
3 changes: 3 additions & 0 deletions src/routes/DateInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -33,6 +34,7 @@
slot="left"
bind:id
bind:value
bind:initialBrowseDate
bind:min
bind:max
bind:placeholder
Expand All @@ -51,6 +53,7 @@
<svelte:fragment slot="right">
<h3 class="no-top">Props</h3>
<Prop label="value">{value}</Prop>
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
<Prop label="min" bind:value={min} />
<Prop label="max" bind:value={max} />
<Prop label="id" bind:value={id} />
Expand Down
3 changes: 3 additions & 0 deletions src/routes/DatePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -23,6 +24,7 @@
<div class="left" slot="left">
<DatePicker
bind:value
bind:initialBrowseDate
bind:min
bind:max
locale={locale.value}
Expand All @@ -33,6 +35,7 @@
<div slot="right">
<h3 class="no-top">Props</h3>
<Prop label="value">{value}</Prop>
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
<Prop label="min" bind:value={min} />
<Prop label="max" bind:value={max} />
<Prop label="locale" bind:value={locale} values={locales} />
Expand Down
56 changes: 29 additions & 27 deletions src/routes/docs/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,25 @@ The component will not assign a date value until a specific date is selected in

<h3 id="props">Props</h3>

| 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 |

<h4 id="format-string">Format string</h4>

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

<h3 id="datepicker-props">Props</h3>

| 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 |

<h2 id="isDisabledDate">Date disabling example</h2>

Expand Down