[READ-ONLY] Mirror of https://github.com/probablykasper/date-picker-svelte. Date and time picker for Svelte
date-picker-svelte.kasper.space
calendar
date
date-picker
date-time-picker
datepicker
package
svelte
time
Add `initialBrowseDate` prop (#119)
+50
-38
+3
CHANGELOG.md
+3
CHANGELOG.md
+7
-6
src/lib/DateInput.svelte
+7
-6
src/lib/DateInput.svelte
···
13
13
select: Date
14
14
}>()
15
15
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()
18
18
19
19
// inner date value store for preventing value updates (and also
20
20
// text updates as a result) when date is unchanged
···
39
39
40
40
/** Date value */
41
41
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)
43
43
44
44
/** 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)
46
46
/** 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)
48
48
/** Set the input element's ID attribute */
49
49
export let id: string | null = null
50
50
/** Placeholder text to show when input field is empty */
···
79
79
const result = parse(text, formatTokens, $store)
80
80
if (result.date !== null) {
81
81
valid = true
82
-
store.set(toValidDate(defaultDate, result.date, min, max, isDisabledDate))
82
+
store.set(toValidDate(initialBrowseDate, result.date, min, max, isDisabledDate))
83
83
} else {
84
84
valid = false
85
85
}
···
234
234
on:focusout={onFocusOut}
235
235
on:select={onSelect}
236
236
bind:value={$store}
237
+
{initialBrowseDate}
237
238
{min}
238
239
{max}
239
240
{locale}
+5
-5
src/lib/DatePicker.svelte
+5
-5
src/lib/DatePicker.svelte
···
46
46
47
47
const todayDate = new Date()
48
48
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()
51
51
52
52
/** Show a time picker with the specified precision */
53
53
export let timePrecision: 'minute' | 'second' | 'millisecond' | null = null
54
54
/** 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)
56
56
/** 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)
58
58
/** Disallow specific dates */
59
59
export let isDisabledDate: ((dateToCheck: Date) => boolean) | null = null
60
60
···
72
72
}
73
73
74
74
/** 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))
76
76
$: setBrowseDate(value)
77
77
function setBrowseDate(value: Date | null) {
78
78
if (browseDate.getTime() !== value?.getTime()) {
+3
src/routes/DateInput.svelte
+3
src/routes/DateInput.svelte
···
8
8
let id: string
9
9
let placeholder: string
10
10
let value: Date
11
+
let initialBrowseDate: Date
11
12
let min: Date
12
13
let max: Date
13
14
let valid: boolean
···
33
34
slot="left"
34
35
bind:id
35
36
bind:value
37
+
bind:initialBrowseDate
36
38
bind:min
37
39
bind:max
38
40
bind:placeholder
···
51
53
<svelte:fragment slot="right">
52
54
<h3 class="no-top">Props</h3>
53
55
<Prop label="value">{value}</Prop>
56
+
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
54
57
<Prop label="min" bind:value={min} />
55
58
<Prop label="max" bind:value={max} />
56
59
<Prop label="id" bind:value={id} />
+3
src/routes/DatePicker.svelte
+3
src/routes/DatePicker.svelte
···
6
6
import { hy, de, nb } from 'date-fns/locale'
7
7
8
8
let value: Date
9
+
let initialBrowseDate: Date
9
10
let min: Date
10
11
let max: Date
11
12
let locales = [
···
23
24
<div class="left" slot="left">
24
25
<DatePicker
25
26
bind:value
27
+
bind:initialBrowseDate
26
28
bind:min
27
29
bind:max
28
30
locale={locale.value}
···
33
35
<div slot="right">
34
36
<h3 class="no-top">Props</h3>
35
37
<Prop label="value">{value}</Prop>
38
+
<Prop label="initialBrowseDate" bind:value={initialBrowseDate} />
36
39
<Prop label="min" bind:value={min} />
37
40
<Prop label="max" bind:value={max} />
38
41
<Prop label="locale" bind:value={locale} values={locales} />
+29
-27
src/routes/docs/+page.md
+29
-27
src/routes/docs/+page.md
···
29
29
30
30
<h3 id="props">Props</h3>
31
31
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 |
50
51
51
52
<h4 id="format-string">Format string</h4>
52
53
···
69
70
70
71
<h3 id="datepicker-props">Props</h3>
71
72
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 |
81
83
82
84
<h2 id="isDisabledDate">Date disabling example</h2>
83
85