1
0
Fork 0
mirror of synced 2024-07-07 23:35:49 +12:00
budibase/packages/builder/src/components/common/DatePicker.svelte

35 lines
743 B
Svelte

<script>
import flatpickr from "flatpickr"
import "flatpickr/dist/flatpickr.css"
import { onMount } from "svelte"
export let value
export let label
export let width = "medium"
export let size = "small"
let input
let fpInstance
$: if (fpInstance) fpInstance.setDate(value)
onMount(() => {
fpInstance = flatpickr(input, {})
fpInstance.config.onChange.push(selectedDates => {
if (selectedDates.length > 0) value = new Date(selectedDates[0])
})
return fpInstance
})
</script>
<div class="uk-margin">
<label class="uk-form-label">{label}</label>
<div class="uk-form-controls">
<input
class="uk-input uk-form-width-{width} uk-form-{size}"
bind:this={input} />
</div>
</div>