52 lines
962 B
Vue
52 lines
962 B
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
dateinputid: String,
|
|
dateinputlabel: String,
|
|
initdate: String,
|
|
isHorizontal: Boolean,
|
|
})
|
|
defineEmits(['onDateChange'])
|
|
|
|
const today = new Date().toISOString().slice(0, 10)
|
|
</script>
|
|
|
|
<template>
|
|
<label class="datelabel" :class="props.isHorizontal ? 'pr-2' : 'pb-1'" :for="props.dateinputid">
|
|
{{ $t(props.dateinputlabel) }}
|
|
</label>
|
|
<input
|
|
class="datepicker has-background-dark has-text-light"
|
|
:id="props.dateinputid"
|
|
type="date"
|
|
@change="(e) => $emit('onDateChange', e.target.value)"
|
|
:value="props.initdate"
|
|
:max="today"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.datelabel {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 26px;
|
|
border: none;
|
|
}
|
|
|
|
.datepicker {
|
|
font-size: 26px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.datelabel {
|
|
font-size: 18px;
|
|
}
|
|
.datepicker {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
</style>
|