102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<template>
|
|
<div class="d-flex root">
|
|
<v-text-field type="number" v-model="year"
|
|
rounded="0" :hide-details="hideDetails" single-line class="all year" maxlength="4"/>
|
|
<v-select v-model="month" :items="monthItems"
|
|
rounded="0" :hide-details="hideDetails" single-line class="all month"/>
|
|
<v-text-field type="number" v-model="day"
|
|
rounded="0" :hide-details="hideDetails" single-line class="all year"
|
|
min="1" :max="now.daysInMonth" maxlength="2"/>
|
|
<v-text-field type="time" v-model="time"
|
|
rounded="0" :hide-details="hideDetails" single-line class="all"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {usePrefStore, useStore} from "@/store/store";
|
|
import {computed} from "vue";
|
|
import {DateTime, Info} from "luxon";
|
|
|
|
const prefs = usePrefStore()
|
|
const props = defineProps(['modelValue'])
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const hideDetails = true
|
|
|
|
const now = computed(()=>DateTime.fromSeconds(props.modelValue?props.modelValue:0).setZone(prefs.timezone))
|
|
|
|
const year = computed({
|
|
get() { return now.value.year },
|
|
set(v) { update({year:v}) }
|
|
})
|
|
|
|
const month = computed({
|
|
get() { return now.value.month },
|
|
set(v) { update({month:v}) }
|
|
})
|
|
|
|
const monthItems = []
|
|
const monthNames = Info.months();
|
|
for( let i=0; i<12; i++ )
|
|
monthItems.push({value: i+1, title: monthNames[i]})
|
|
|
|
const day = computed({
|
|
get() { return now.value.day },
|
|
set(v) { update({day:v}) }
|
|
})
|
|
|
|
|
|
const time = computed({
|
|
get() {
|
|
const date = now.value
|
|
const hour = date.hour
|
|
const min = date.minute
|
|
return hour.toString().padStart(2,'0') + ':' + min.toString().padStart(2,'0')
|
|
},
|
|
set(v) {
|
|
const [hour,minute] = v.split(':')
|
|
update({hour:hour, minute:minute})
|
|
}
|
|
})
|
|
|
|
function update(fields={}) {
|
|
if (Object.keys(fields).length)
|
|
emit('update:modelValue', now.value.set(fields).toUnixInteger())
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.root {
|
|
$height: 3.3em;
|
|
margin-bottom: 0;
|
|
height: $height;
|
|
min-height: $height;
|
|
max-height: $height;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.year {
|
|
width: 6em;
|
|
max-width: 6em;
|
|
min-width: 6em;
|
|
}
|
|
|
|
.month {
|
|
width: 10em;
|
|
max-width: 10em;
|
|
min-width: 6em;
|
|
}
|
|
|
|
.day {
|
|
width: 4em;
|
|
max-width: 4em;
|
|
min-width: 4em;
|
|
}
|
|
|
|
.picker {
|
|
width: 8em;
|
|
height: 2em;
|
|
}
|
|
</style>
|