[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 disabled property to input with styling and condition (#25)
authored by
Giovanni Guarino
and committed by
GitHub
(Sep 6, 2022, 10:10 AM +0200)
4e7c609d
64f35ec9
+13
-1
+3
CHANGELOG.md
+3
CHANGELOG.md
+6
-1
src/lib/DateInput.svelte
+6
-1
src/lib/DateInput.svelte
···
44
44
export let placeholder = '2020-12-31 23:00:00'
45
45
/** Whether the text is valid */
46
46
export let valid = true
47
+
/** Disable the input **/
48
+
export let disabled = false
47
49
48
50
/** Format string */
49
51
export let format = 'yyyy-MM-dd HH:mm:ss'
···
145
147
type="text"
146
148
bind:value={text}
147
149
{placeholder}
150
+
{disabled}
148
151
on:focus={() => (visible = true)}
149
152
on:mousedown={() => (visible = true)}
150
153
on:input={input}
151
154
/>
152
-
{#if visible}
155
+
{#if visible && !disabled}
153
156
<div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
154
157
<DateTimePicker
155
158
on:focusout={onFocusOut}
···
182
185
&:focus
183
186
border-color: var(--date-picker-highlight-border, #0269f7)
184
187
box-shadow: 0px 0px 0px 2px var(--date-picker-highlight-shadow, rgba(#0269f7, 0.4))
188
+
&:disabled
189
+
opacity: 0.5
185
190
.invalid
186
191
border: 1px solid rgba(#f92f72, 0.5)
187
192
background-color: rgba(#f92f72, 0.1)
+3
src/routes/_DateInput.svelte
+3
src/routes/_DateInput.svelte
···
9
9
let max: Date
10
10
let valid: boolean
11
11
let visible: boolean
12
+
let disabled: boolean
12
13
let closeOnSelection: boolean
13
14
let browseWithoutSelecting: boolean
14
15
let format: string
···
24
25
bind:valid
25
26
bind:format
26
27
bind:visible
28
+
bind:disabled
27
29
bind:closeOnSelection
28
30
bind:browseWithoutSelecting
29
31
/>
···
37
39
<Prop label="valid" bind:value={valid} />
38
40
<Prop label="format" bind:value={format} />
39
41
<Prop label="visible" bind:value={visible} />
42
+
<Prop label="disabled" bind:value={disabled} />
40
43
<Prop label="closeOnSelection" bind:value={closeOnSelection} />
41
44
<Prop label="browseWithoutSelecting" bind:value={browseWithoutSelecting} />
42
45
<Prop label="locale">Default</Prop>
+1
src/routes/docs.md
+1
src/routes/docs.md
···
38
38
| `valid` | bool | Whether the text is valid |
39
39
| `format` | string | Format string |
40
40
| `visible` | bool | Whether the date popup is visible |
41
+
| `disabled` | bool | Disable the input |
41
42
| `closeOnSelection` | bool | Close the date popup when a date is selected |
42
43
| `browseWithoutSelecting` | bool | Wait with updating the date until a date is selected |
43
44
| `locale` | Locale | Locale object for internationalization |