64 lines
1.7 KiB
Svelte
64 lines
1.7 KiB
Svelte
<script>
|
|
import { SchemaField } from "pocketbase";
|
|
import Flatpickr from "svelte-flatpickr";
|
|
import CommonHelper from "@/utils/CommonHelper";
|
|
import Field from "@/components/base/Field.svelte";
|
|
import tooltip from "@/actions/tooltip";
|
|
|
|
export let field = new SchemaField();
|
|
export let value = undefined;
|
|
|
|
let pickerValue = value;
|
|
|
|
// strip ms and zone for backwards compatibility with the older format
|
|
// and because flatpickr currently doesn't have integrated
|
|
// zones support and requires manual parsing and formatting
|
|
$: if (value && value.length > 19) {
|
|
value = value.substring(0, 19);
|
|
}
|
|
|
|
$: if (pickerValue != value) {
|
|
pickerValue = value;
|
|
}
|
|
|
|
// ensure that value is set even on manual input edit
|
|
function onClose(e) {
|
|
if (e.detail && e.detail.length == 3) {
|
|
value = e.detail[1];
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
value = "";
|
|
}
|
|
</script>
|
|
|
|
<Field class="form-field {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
|
|
<label for={uniqueId}>
|
|
<i class={CommonHelper.getFieldTypeIcon(field.type)} />
|
|
<span class="txt">{field.name} (UTC)</span>
|
|
</label>
|
|
|
|
{#if value && !field.required}
|
|
<div class="form-field-addon">
|
|
<button type="button" class="link-hint clear-btn" use:tooltip={"Clear"} on:click={() => clear()}>
|
|
<i class="ri-close-line" />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<Flatpickr
|
|
id={uniqueId}
|
|
options={CommonHelper.defaultFlatpickrOptions()}
|
|
bind:value={pickerValue}
|
|
bind:formattedValue={value}
|
|
on:close={onClose}
|
|
/>
|
|
</Field>
|
|
|
|
<style>
|
|
.clear-btn {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|