Skip to content

Commit 311657e

Browse files
endaamanendaaman
authored
Add initialBrowseDate prop (#119)
1 parent 8dcba5c commit 311657e

File tree

6 files changed

+50
-38
lines changed

6 files changed

+50
-38
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
## Next
4+
- Add `initialBrowseDate` prop (@endaaman)
5+
36
## 2.16.0 - 2025 Apr 2
47
- Add `isDisabledDate` prop (@stinger567)
58

‎src/lib/DateInput.svelte‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
select: Date
1414
}>()
1515
16-
/** Default date to display in picker before value is assigned */
17-
const defaultDate = new Date()
16+
/** Initial date to show in the calendar when no value is selected */
17+
export let initialBrowseDate = new Date()
1818
1919
// inner date value store for preventing value updates (and also
2020
// text updates as a result) when date is unchanged
@@ -39,12 +39,12 @@
3939
4040
/** Date value */
4141
export let value: Date | null = null
42-
$: store.set(value ? toValidDate(defaultDate, value, min, max, isDisabledDate) : value)
42+
$: store.set(value ? toValidDate(initialBrowseDate, value, min, max, isDisabledDate) : value)
4343
4444
/** The earliest value the user can select */
45-
export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
45+
export let min = new Date(initialBrowseDate.getFullYear() - 20, 0, 1)
4646
/** The latest value the user can select */
47-
export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999)
47+
export let max = new Date(initialBrowseDate.getFullYear(), 11, 31, 23, 59, 59, 999)
4848
/** Set the input element's ID attribute */
4949
export let id: string | null = null
5050
/** Placeholder text to show when input field is empty */
@@ -79,7 +79,7 @@
7979
const result = parse(text, formatTokens, $store)
8080
if (result.date !== null) {
8181
valid = true
82-
store.set(toValidDate(defaultDate, result.date, min, max, isDisabledDate))
82+
store.set(toValidDate(initialBrowseDate, result.date, min, max, isDisabledDate))
8383
} else {
8484
valid = false
8585
}
@@ -234,6 +234,7 @@
234234
on:focusout={onFocusOut}
235235
on:select={onSelect}
236236
bind:value={$store}
237+
{initialBrowseDate}
237238
{min}
238239
{max}
239240
{locale}

‎src/lib/DatePicker.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@
4646
4747
const todayDate = new Date()
4848
49-
/** Default Date to use */
50-
const defaultDate = new Date()
49+
/** Initial date to show in the calendar when no value is selected */
50+
export let initialBrowseDate = new Date()
5151
5252
/** Show a time picker with the specified precision */
5353
export let timePrecision: 'minute' | 'second' | 'millisecond' | null = null
5454
/** The earliest year the user can select */
55-
export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
55+
export let min = new Date(initialBrowseDate.getFullYear() - 20, 0, 1)
5656
/** The latest year the user can select */
57-
export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999)
57+
export let max = new Date(initialBrowseDate.getFullYear(), 11, 31, 23, 59, 59, 999)
5858
/** Disallow specific dates */
5959
export let isDisabledDate: ((dateToCheck: Date) => boolean) | null = null
6060
@@ -72,7 +72,7 @@
7272
}
7373
7474
/** The date shown in the popup when none is selected */
75-
let browseDate = value ? cloneDate(value) : cloneDate(clampDate(defaultDate, min, max))
75+
let browseDate = value ? cloneDate(value) : cloneDate(clampDate(initialBrowseDate, min, max))
7676
$: setBrowseDate(value)
7777
function setBrowseDate(value: Date | null) {
7878
if (browseDate.getTime() !== value?.getTime()) {

‎src/routes/DateInput.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
let id: string
99
let placeholder: string
1010
let value: Date
11+
let initialBrowseDate: Date
1112
let min: Date
1213
let max: Date
1314
let valid: boolean
@@ -33,6 +34,7 @@
3334
slot="left"
3435
bind:id
3536
bind:value
37+
bind:initialBrowseDate
3638
bind:min
3739
bind:max
3840
bind:placeholder
@@ -51,6 +53,7 @@
5153
<svelte:fragment slot="right">
5254
<h3 class="no-top">Props</h3>
5355
<Prop label="value">{value}</Prop>
56+
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
5457
<Prop label="min" bind:value={min} />
5558
<Prop label="max" bind:value={max} />
5659
<Prop label="id" bind:value={id} />

‎src/routes/DatePicker.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { hy, de, nb } from 'date-fns/locale'
77
88
let value: Date
9+
let initialBrowseDate: Date
910
let min: Date
1011
let max: Date
1112
let locales = [
@@ -23,6 +24,7 @@
2324
<div class="left" slot="left">
2425
<DatePicker
2526
bind:value
27+
bind:initialBrowseDate
2628
bind:min
2729
bind:max
2830
locale={locale.value}
@@ -33,6 +35,7 @@
3335
<div slot="right">
3436
<h3 class="no-top">Props</h3>
3537
<Prop label="value">{value}</Prop>
38+
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
3639
<Prop label="min" bind:value={min} />
3740
<Prop label="max" bind:value={max} />
3841
<Prop label="locale" bind:value={locale} values={locales} />

‎src/routes/docs/+page.md‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,25 @@ The component will not assign a date value until a specific date is selected in
2929

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)