mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
11 changed files with 116 additions and 40 deletions
@ -0,0 +1,5 @@ |
|||
<script> |
|||
import FormFieldSelect from "./FormFieldSelect.svelte" |
|||
</script> |
|||
|
|||
<FormFieldSelect {...$$props} type="datetime" /> |
|||
@ -1,21 +0,0 @@ |
|||
<script> |
|||
import { DatePicker } from "@budibase/bbui" |
|||
import { getContext } from "svelte" |
|||
|
|||
const { styleable, setBindableValue } = getContext("sdk") |
|||
const component = getContext("component") |
|||
|
|||
export let placeholder |
|||
|
|||
let value |
|||
$: setBindableValue($component.id, value) |
|||
|
|||
function handleChange(event) { |
|||
const [fullDate] = event.detail |
|||
value = fullDate |
|||
} |
|||
</script> |
|||
|
|||
<div use:styleable={$component.styles}> |
|||
<DatePicker {placeholder} on:change={handleChange} {value} /> |
|||
</div> |
|||
@ -0,0 +1,79 @@ |
|||
<script> |
|||
import Flatpickr from "svelte-flatpickr" |
|||
import SpectrumField from "./SpectrumField.svelte" |
|||
import "flatpickr/dist/flatpickr.css" |
|||
import "@spectrum-css/inputgroup/dist/index-vars.css" |
|||
|
|||
export let field |
|||
export let label |
|||
export let placeholder |
|||
|
|||
let fieldState |
|||
let fieldApi |
|||
let value |
|||
$: fieldApi?.setValue(value) |
|||
|
|||
const handleChange = event => { |
|||
const [fullDate] = event.detail |
|||
value = fullDate |
|||
} |
|||
|
|||
const formatDate = dateString => { |
|||
const date = new Date(dateString) |
|||
return date.toDateString() |
|||
} |
|||
</script> |
|||
|
|||
<SpectrumField {label} {field} bind:fieldState bind:fieldApi> |
|||
{#if fieldState} |
|||
<Flatpickr |
|||
{value} |
|||
options={{ element: `#${$fieldState.id}-wrapper` }} |
|||
on:change={handleChange} |
|||
element={`#${$fieldState.id}-wrapper`}> |
|||
<div |
|||
id={`${$fieldState.id}-wrapper`} |
|||
aria-disabled="false" |
|||
aria-invalid="false" |
|||
class="flatpickr spectrum-InputGroup spectrum-Datepicker" |
|||
aria-readonly="false" |
|||
aria-required="false" |
|||
aria-haspopup="true"> |
|||
<div class="spectrum-Textfield spectrum-InputGroup-textfield"> |
|||
<input |
|||
data-input |
|||
type="text" |
|||
class="spectrum-Textfield-input spectrum-InputGroup-input" |
|||
aria-invalid="false" |
|||
{placeholder} |
|||
id={$fieldState.id} |
|||
value={formatDate($fieldState.value)} /> |
|||
</div> |
|||
<button |
|||
type="button" |
|||
class="spectrum-Picker spectrum-InputGroup-button" |
|||
tabindex="-1"> |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--sizeM" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
aria-label="Calendar"> |
|||
<use xlink:href="#spectrum-icon-18-Calendar" /> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
</Flatpickr> |
|||
{/if} |
|||
</SpectrumField> |
|||
|
|||
<style> |
|||
.flatpickr { |
|||
width: var( |
|||
--spectrum-alias-single-line-width, |
|||
var(--spectrum-global-dimension-size-2400) |
|||
); |
|||
} |
|||
.flatpickr .spectrum-Textfield { |
|||
width: auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue