forked from mirrors/homebox
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="!inline" class="form-control w-full">
|
|
<label class="label">
|
|
<span class="label-text"> {{ label }}</span>
|
|
</label>
|
|
<input ref="input" v-model="selected" type="date" class="input input-bordered w-full" />
|
|
</div>
|
|
<div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
|
|
<label class="label">
|
|
<span class="label-text"> {{ label }} </span>
|
|
</label>
|
|
<input v-model="selected" type="date" class="input input-bordered col-span-3 w-full mt-2" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const emit = defineEmits(["update:modelValue", "update:text"]);
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Date as () => Date | string | null,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: "Date",
|
|
},
|
|
});
|
|
|
|
const selected = computed({
|
|
get() {
|
|
// return modelValue as string as YYYY-MM-DD or null
|
|
if (validDate(props.modelValue)) {
|
|
if (typeof props.modelValue === "string") {
|
|
return props.modelValue;
|
|
}
|
|
|
|
return props.modelValue ? props.modelValue.toISOString().split("T")[0] : null;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
set(value: string | null) {
|
|
// emit update:modelValue with a Date object or null
|
|
emit("update:modelValue", value ? new Date(value) : null);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style class="scoped">
|
|
::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|