[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 `min`/`max` clamping not showing in time fields
+43
-40
+3
CHANGELOG.md
+3
CHANGELOG.md
+9
-1
src/lib/DatePicker.svelte
+9
-1
src/lib/DatePicker.svelte
···
31
31
}
32
32
}
33
33
34
+
function setTime(d: Date) {
35
+
browseDate = clamp(d, min, max)
36
+
if (value) {
37
+
setValue(browseDate)
38
+
}
39
+
return browseDate
40
+
}
41
+
34
42
const todayDate = new Date()
35
43
36
44
/** Default Date to use */
···
330
338
</div>
331
339
{/each}
332
340
333
-
<TimePicker {timePrecision} {browseDate} {browse} />
341
+
<TimePicker {timePrecision} bind:browseDate {setTime} />
334
342
</div>
335
343
</div>
336
344
+26
-10
src/lib/TimePicker.svelte
+26
-10
src/lib/TimePicker.svelte
···
1
1
<script lang="ts">
2
2
export let browseDate: Date
3
3
export let timePrecision: 'minute' | 'second' | 'millisecond' | null
4
-
export let browse: (d: Date) => void
4
+
export let setTime: (d: Date) => Date
5
5
6
6
let fields: (HTMLSpanElement | undefined | null)[] = []
7
7
···
63
63
return { label, len: 2, max: 59 } as const
64
64
} else if (label === 'Seconds') {
65
65
return { label, len: 2, max: 59 } as const
66
+
} else if (label === 'Milliseconds') {
67
+
return { label, len: 3, max: 999 } as const
66
68
} else {
67
-
return { label, len: 3, max: 999 } as const
69
+
throw new Error('Invalid label ' + label)
70
+
}
71
+
}
72
+
73
+
$: setText(browseDate)
74
+
function setText(d: Date) {
75
+
const hours = ('00' + d.getHours()).slice(-2)
76
+
const minutes = ('00' + d.getMinutes()).slice(-2)
77
+
const seconds = ('00' + d.getSeconds()).slice(-2)
78
+
const milliseconds = ('000' + d.getMilliseconds()).slice(-3)
79
+
if (fields[0] && fields[0].innerText !== hours) {
80
+
fields[0].innerText = hours
81
+
}
82
+
if (fields[1] && fields[1].innerText !== minutes) {
83
+
fields[1].innerText = minutes
84
+
}
85
+
if (fields[2] && fields[2].innerText !== seconds) {
86
+
fields[2].innerText = seconds
87
+
}
88
+
if (fields[3] && fields[3].innerText !== milliseconds) {
89
+
fields[3].innerText = milliseconds
68
90
}
69
91
}
70
92
···
79
101
browseDate.setSeconds(value)
80
102
} else if (field.label === 'Milliseconds') {
81
103
browseDate.setMilliseconds(value)
82
-
} else {
83
-
throw new Error('Invalid label ' + field.label)
84
104
}
85
105
86
-
const length = field.label === 'Milliseconds' ? 3 : 2
87
-
const text_value = ('000' + value).slice(-length)
88
-
if (text_value !== node.innerText) {
89
-
node.innerText = text_value
90
-
}
91
-
browse(browseDate)
106
+
browseDate = setTime(browseDate)
107
+
setText(browseDate)
92
108
}
93
109
94
110
function parse(text: string, length: number) {
+5
-29
src/routes/bug/+page.svelte
+5
-29
src/routes/bug/+page.svelte
···
1
1
<script lang="ts">
2
2
import DatePicker from '$lib/DatePicker.svelte'
3
3
4
-
let date: Date | null = new Date()
5
-
// let date_string: string | undefined
6
-
let is_date_valid: boolean
7
-
let max_date = new Date()
8
-
9
-
// Atleast 14 years old
10
-
max_date.setDate(max_date.getDate() - 5110)
11
-
12
-
$: if (date && is_date_valid) {
13
-
date.setHours(12, 0, 0, 0)
14
-
date.toISOString()
15
-
// date_string = date.toISOString().slice(0, 10)
16
-
}
4
+
let min = new Date(2024, 1, 26, 17, 30)
5
+
let value: Date | undefined
17
6
</script>
18
7
19
-
<button
20
-
type="button"
21
-
on:click={() => {
22
-
date?.setMonth(date.getMonth() - 1)
23
-
date = date
24
-
}}>Subtract 1 month</button
25
-
>
26
-
<!-- <input bind:value={date_string} type="date" class="hidden" id="id_birth_date" name="birth_date" /> -->
27
-
<!-- <DateInput
28
-
bind:value={date}
29
-
bind:valid={is_date_valid}
30
-
max={max_date}
31
-
format="yyyy-MM-dd"
32
-
placeholder="Select a date"
33
-
/> -->
34
-
<DatePicker bind:value={date} max={max_date} browseWithoutSelecting={true} />
8
+
<DatePicker timePrecision="minute" {min} bind:value />
9
+
10
+
{value}