[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
Fix invalid input fields resetting when clicked
+29
-13
+28
-12
src/lib/DateInput.svelte
+28
-12
src/lib/DateInput.svelte
···
6
6
import { parse, createFormat } from './parse'
7
7
import type { FormatToken } from './parse'
8
8
import DateTimePicker from './DatePicker.svelte'
9
+
import { writable } from 'svelte/store'
10
+
11
+
const defaultDate = new Date()
12
+
13
+
// inner date value store for preventing value updates (and also
14
+
// text updates as a result) when date is unchanged
15
+
const innerStore = writable(defaultDate)
16
+
const store = (() => {
17
+
return {
18
+
subscribe: innerStore.subscribe,
19
+
set: (d: Date) => {
20
+
if (d.getTime() !== $innerStore.getTime()) {
21
+
innerStore.set(d)
22
+
value = d
23
+
}
24
+
},
25
+
}
26
+
})()
9
27
10
28
/** Date value */
11
-
export let value = new Date()
12
-
function setValue(d: Date) {
13
-
if (d.getTime() !== value.getTime()) value = d
14
-
}
29
+
export let value = defaultDate
30
+
$: store.set(value)
15
31
/** The earliest value the user can select */
16
-
export let min = new Date(new Date().getFullYear() - 20, 0, 1)
32
+
export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
17
33
/** The latest value the user can select */
18
-
export let max = new Date(new Date().getFullYear(), 11, 31, 23, 59, 59, 999)
34
+
export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999)
19
35
/** Placeholder text to show when input field is empty */
20
36
export let placeholder = '2020-12-31 23:00:00'
21
37
/** Whether the text is valid */
···
32
48
function valueUpdate(value: Date, formatTokens: FormatToken[]) {
33
49
text = toText(value, formatTokens)
34
50
}
35
-
$: valueUpdate(value, formatTokens)
51
+
$: valueUpdate($store, formatTokens)
36
52
37
-
export let text = toText(value, formatTokens)
53
+
export let text = toText($store, formatTokens)
38
54
let textHistory = [text, text]
39
55
$: textHistory = [textHistory[1], text]
40
56
41
57
function textUpdate(text: string, formatTokens: FormatToken[]) {
42
-
const result = parse(text, formatTokens, value)
58
+
const result = parse(text, formatTokens, $store)
43
59
if (result.date !== null) {
44
60
valid = true
45
-
setValue(result.date)
61
+
store.set(result.date)
46
62
} else {
47
63
valid = false
48
64
}
···
56
72
typeof e.data === 'string' &&
57
73
text === textHistory[0] + e.data
58
74
) {
59
-
let result = parse(textHistory[0], formatTokens, value)
75
+
let result = parse(textHistory[0], formatTokens, $store)
60
76
if (result.missingPunctuation !== '' && !result.missingPunctuation.startsWith(e.data)) {
61
77
text = textHistory[0] + result.missingPunctuation + e.data
62
78
}
···
104
120
on:input={input} />
105
121
{#if visible}
106
122
<div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
107
-
<DateTimePicker on:focusout={onFocusOut} bind:value bind:min bind:max {locale} />
123
+
<DateTimePicker on:focusout={onFocusOut} bind:value={$store} {min} {max} {locale} />
108
124
</div>
109
125
{/if}
110
126
</div>
+1
-1
src/lib/DatePicker.svelte
+1
-1
src/lib/DatePicker.svelte
···
11
11
}
12
12
function updateValue(updater: (date: Date) => Date) {
13
13
let d = updater(new Date(value.getTime()))
14
-
if (d.getTime() !== value.getTime()) value = d
14
+
setValue(d)
15
15
}
16
16
/** The earliest year the user can select */
17
17
export let min = new Date(new Date().getFullYear() - 20, 0, 1)