95 lines
3.0 KiB
Vue
95 lines
3.0 KiB
Vue
<script setup>
|
|
import InputLabel from "./InputLabel.vue";
|
|
import InputError from "./InputError.vue";
|
|
import { computed } from "vue";
|
|
import VueDatePicker from "@vuepic/vue-datepicker";
|
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
|
|
/*
|
|
DatePickerField (vue-datepicker wrapper)
|
|
- Replaces previous v-calendar usage to avoid range/dayIndex runtime errors.
|
|
- Keeps API compatible with existing callers.
|
|
Props:
|
|
- modelValue: Date | string | number | null
|
|
- id: string
|
|
- label: string
|
|
- format: string (default 'dd.MM.yyyy')
|
|
- enableTimePicker: boolean (default false)
|
|
- inline: boolean (default false)
|
|
- placeholder: string
|
|
- error: string | string[]
|
|
- legacy props (teleportTarget, autoPosition, menuClassName, fixed, closeOnAutoApply, closeOnScroll)
|
|
are accepted for compatibility but only mapped where applicable.
|
|
*/
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: [Date, String, Number, null], default: null },
|
|
id: { type: String, default: undefined },
|
|
label: { type: String, default: undefined },
|
|
format: { type: String, default: "dd.MM.yyyy" },
|
|
enableTimePicker: { type: Boolean, default: false },
|
|
inline: { type: Boolean, default: false },
|
|
// legacy props maintained for compatibility
|
|
autoApply: { type: Boolean, default: false },
|
|
teleportTarget: { type: [Boolean, String], default: "body" },
|
|
autoPosition: { type: Boolean, default: true },
|
|
menuClassName: { type: String, default: "dp-over-modal" },
|
|
fixed: { type: Boolean, default: true },
|
|
closeOnAutoApply: { type: Boolean, default: true },
|
|
closeOnScroll: { type: Boolean, default: true },
|
|
placeholder: { type: String, default: "" },
|
|
error: { type: [String, Array], default: undefined },
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue", "change"]);
|
|
|
|
const valueProxy = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => {
|
|
emit("update:modelValue", val);
|
|
emit("change", val);
|
|
},
|
|
});
|
|
|
|
// vue-datepicker accepts format like 'dd.MM.yyyy' and controls 24h time via is-24 prop
|
|
const inputClasses =
|
|
"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel v-if="label" :for="id" :value="label" />
|
|
|
|
<VueDatePicker
|
|
v-model="valueProxy"
|
|
:format="format"
|
|
:enable-time-picker="enableTimePicker"
|
|
:is-24="true"
|
|
:inline="inline"
|
|
:auto-apply="autoApply"
|
|
:teleport="false"
|
|
:close-on-auto-apply="closeOnAutoApply"
|
|
:close-on-scroll="closeOnScroll"
|
|
:input-class-name="inputClasses"
|
|
:menu-class-name="'z-[1000]'"
|
|
:locale="'sl'"
|
|
:id="id"
|
|
:placeholder="placeholder"
|
|
/>
|
|
|
|
<template v-if="error">
|
|
<InputError
|
|
v-if="Array.isArray(error)"
|
|
v-for="(e, idx) in error"
|
|
:key="idx"
|
|
:message="e"
|
|
/>
|
|
<InputError v-else :message="error" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
/* vue-datepicker provides its own menu layering; base CSS imported above */
|
|
</style>
|