2019-07-13 21:35:57 +12:00
|
|
|
<script>
|
|
|
|
|
|
|
|
import flatpickr from "flatpickr";
|
|
|
|
import "flatpickr/dist/flatpickr.css";
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
|
|
|
export let value;
|
|
|
|
export let label;
|
2019-08-07 20:03:49 +12:00
|
|
|
export let width = "medium";
|
|
|
|
export let size = "small";
|
|
|
|
|
2019-07-13 21:35:57 +12:00
|
|
|
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>
|
|
|
|
|
2019-08-07 20:03:49 +12:00
|
|
|
<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>
|
2019-07-13 21:35:57 +12:00
|
|
|
</div>
|
|
|
|
|