|
4 | 4 | import { onMount } from 'svelte'; |
5 | 5 | import Input from './input.svelte'; |
6 | 6 | import { _ } from 'svelte-i18n'; |
7 | | - import { queryParam } from 'sveltekit-search-params'; |
| 7 | + import { queryParameters } from 'sveltekit-search-params'; |
8 | 8 | import { type DateValue, CalendarDate } from '@internationalized/date'; |
9 | 9 |
|
10 | 10 | let { |
|
67 | 67 | let clientHeight = $state(0); |
68 | 68 | const _start = new CalendarDate(start.getFullYear(), start.getMonth() + 1, start.getDate()); |
69 | 69 | const _end = new CalendarDate(end.getFullYear(), end.getMonth() + 1, end.getDate()); |
70 | | - const startParam = queryParam<DateValue>( |
71 | | - 'start', |
| 70 | + const params = queryParameters( |
72 | 71 | { |
| 72 | + 'start':{ |
| 73 | +
|
73 | 74 | defaultValue: _start, |
74 | 75 | encode: (value) => value.toString(), |
75 | 76 | decode: (value) => { |
|
78 | 79 | return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate()); |
79 | 80 | } |
80 | 81 | }, |
81 | | - { showDefaults: false } |
82 | | - ); |
83 | | -
|
84 | | - const endParam = queryParam<DateValue>( |
85 | | - 'end', |
86 | | - { |
| 82 | + end:{ |
87 | 83 | defaultValue: _end, |
88 | 84 | encode: (value) => value.toString(), |
89 | 85 | decode: (value) => { |
|
92 | 88 | return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate()); |
93 | 89 | } |
94 | 90 | }, |
95 | | - { showDefaults: false } |
| 91 | + } |
96 | 92 | ); |
| 93 | +
|
| 94 | + |
97 | 95 | </script> |
98 | 96 |
|
99 | 97 | <div class="relative flex h-full w-full flex-col"> |
|
114 | 112 | name="start" |
115 | 113 | label={$_('globals.start')} |
116 | 114 | type="date" |
117 | | - bind:date={$startParam} |
| 115 | + bind:date={params.start} |
118 | 116 | actions={{ |
119 | 117 | focus: (e) => { |
120 | 118 | (e.currentTarget as HTMLInputElement)?.showPicker(); |
|
125 | 123 | name="end" |
126 | 124 | label={$_('globals.end')} |
127 | 125 | type="date" |
128 | | - bind:date={$endParam} |
| 126 | + bind:date={params.end} |
129 | 127 | actions={{ |
130 | 128 | focus: (e) => { |
131 | 129 | (e.currentTarget as HTMLInputElement)?.showPicker(); |
|
0 commit comments