60 lines
No EOL
1.2 KiB
Vue
60 lines
No EOL
1.2 KiB
Vue
<script setup lang="ts">
|
|
import {type PropType, ref, watch} from 'vue'
|
|
|
|
const props = defineProps({
|
|
time: {
|
|
default: '',
|
|
type: Date
|
|
},
|
|
label: {
|
|
default: '',
|
|
type: String
|
|
},
|
|
timeMin: {
|
|
default: null,
|
|
type: [Date, null] as PropType<Date | null>
|
|
}
|
|
})
|
|
|
|
const time = ref(props.time)
|
|
const menu = ref(true)
|
|
const timeMin = ref(props.timeMin)
|
|
|
|
watch([time, timeMin], ([newTime, newTimeMin]) => {
|
|
if (newTimeMin && newTime.getTime() < newTimeMin.getTime()) {
|
|
const adjustedTime = new Date(newTimeMin);
|
|
adjustedTime.setMinutes(adjustedTime.getMinutes() + 1);
|
|
time.value = adjustedTime;
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-text-field
|
|
:value="time"
|
|
:active="menu"
|
|
:focus="menu"
|
|
:label="props.label"
|
|
@click="menu = !menu"
|
|
prepend-icon="mdi-clock-time-four-outline"
|
|
readonly
|
|
>
|
|
<v-menu
|
|
v-model="menu"
|
|
:close-on-content-click="false"
|
|
transition="scale-transition"
|
|
>
|
|
<v-time-picker
|
|
v-if="menu"
|
|
v-model="time"
|
|
format="ampm"
|
|
ampm-in-title=true
|
|
full-width
|
|
></v-time-picker>
|
|
</v-menu>
|
|
</v-text-field>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |