[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
Lint
+24
-12
-1
package.json
-1
package.json
+2
-1
src/lib/DateInput.svelte
+2
-1
src/lib/DateInput.svelte
···
117
117
{placeholder}
118
118
on:focus={() => (visible = true)}
119
119
on:mousedown={() => (visible = true)}
120
-
on:input={input} />
120
+
on:input={input}
121
+
/>
121
122
{#if visible}
122
123
<div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
123
124
<DateTimePicker on:focusout={onFocusOut} bind:value={$store} {min} {max} {locale} />
+13
-6
src/lib/DatePicker.svelte
+13
-6
src/lib/DatePicker.svelte
···
163
163
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
164
164
><path
165
165
d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
166
-
transform="rotate(180, 12, 12)" /></svg>
166
+
transform="rotate(180, 12, 12)"
167
+
/></svg
168
+
>
167
169
</div>
168
170
<div class="dropdown month">
169
171
<select bind:value={month} on:keydown={monthKeydown}>
···
171
173
<option
172
174
disabled={new Date(year, i, getMonthLength(year, i), 23, 59, 59, 999) < min ||
173
175
new Date(year, i) > max}
174
-
value={i}>{monthName}</option>
176
+
value={i}>{monthName}</option
177
+
>
175
178
{/each}
176
179
</select>
177
180
<!--
···
187
190
{/each}
188
191
</select>
189
192
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
190
-
><path d="M6 0l12 12-12 12z" transform="rotate(90, 12, 12)" /></svg>
193
+
><path d="M6 0l12 12-12 12z" transform="rotate(90, 12, 12)" /></svg
194
+
>
191
195
</div>
192
196
<div class="dropdown year">
193
197
<select bind:value={year} on:keydown={yearKeydown}>
···
202
206
{/each}
203
207
</select>
204
208
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
205
-
><path d="M6 0l12 12-12 12z" transform="rotate(90, 12, 12)" /></svg>
209
+
><path d="M6 0l12 12-12 12z" transform="rotate(90, 12, 12)" /></svg
210
+
>
206
211
</div>
207
212
<div class="page-button" tabindex="-1" on:click={() => setMonth(month + 1)}>
208
213
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
209
-
><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg>
214
+
><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg
215
+
>
210
216
</div>
211
217
</div>
212
218
<div class="header">
···
226
232
on:click={() => setDay(calendarDay)}
227
233
class:disabled={!dayIsInRange(calendarDay)}
228
234
class:selected={calendarDay.month === month && calendarDay.number === dayOfMonth}
229
-
class:other-month={calendarDay.month !== month}>
235
+
class:other-month={calendarDay.month !== month}
236
+
>
230
237
<span>{calendarDay.number}</span>
231
238
</div>
232
239
{/each}
+2
-1
src/routes/_DateInput.svelte
+2
-1
src/routes/_DateInput.svelte
+5
-2
src/routes/__layout.svelte
+5
-2
src/routes/__layout.svelte
···
38
38
<a class="nav-link" href="/demo">Demo</a>
39
39
<a class="nav-link" href="/docs">Docs</a>
40
40
<a class="nav-link" href="https://svelte.dev/repl/044911429c4b4e659362518d9a5deaae?version=3"
41
-
>REPL</a>
41
+
>REPL</a
42
+
>
42
43
<div class="spacer" />
43
44
<a class="nav-link" href="https://github.com/probablykasper/date-picker-svelte">GitHub</a>
44
45
<button class="theme-toggle" on:click={toggleTheme}>
···
49
50
height="22px"
50
51
width="22px"
51
52
><rect fill="none" height="24" width="24" /><path
52
-
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" /></svg>
53
+
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
54
+
/></svg
55
+
>
53
56
</button>
54
57
</header>
55
58
<div class="page">