nuxt-start/components/Birthday.vue
2025-12-23 19:51:09 +01:00

90 lines
2.3 KiB
Vue

<template>
<div class="w-full flex justify-between">
<select class="bg-transparent" style="outline: none;" v-model="YY">
<option class="dark:bg-black opacity-30" value="">év</option>
<option :value="y" v-for="y in years" class="dark:bg-black">{{ y }}</option>
</select>
<select class="bg-transparent" style="outline: none;" placeholder="hónap" v-model="MM">
<option class="dark:bg-black" value="">hónap</option>
<option :value="m" v-for="m in months" class="dark:bg-black">{{ getMonthName(m) }}</option>
</select>
<select class="bg-transparent" style="outline: none;" v-model="DD">
<option class="dark:bg-black" value="">nap</option>
<option :value="d" v-for="d in days" class="dark:bg-black">{{ d }}</option>
</select>
</div>
</template>
<script lang="ts" setup>
const YY = ref('')
const MM = ref('')
const DD = ref('')
const props = defineProps<{
modelValue?: string
}>()
const emits = defineEmits(['update:model-value'])
watch(() => props.modelValue, (newVal) => {
if (newVal && !YY.value && !MM.value && !DD.value) {
const parts = newVal.split('-')
if (parts.length === 3) {
YY.value = parts[0]
MM.value = parseInt(parts[1], 10).toString()
DD.value = parseInt(parts[2], 10).toString()
}
}
}, { immediate: true })
const years = computed(() => {
let d = new Date()
let i: any
let a = []
for (i = d.getFullYear() - 108; i < d.getFullYear() - 18; i++) {
a.push(i)
}
return a.sort((a, b) => {
return b - a
})
})
const months = computed(() => {
let a = []
let i: any
for (i = 1; i < 13; i++) {
a.push(i)
}
return a
})
const days = computed(() => {
if (YY.value && MM.value) {
let list = new Date(YY.value, MM.value, 0).getDate()
return list
}
})
function getMonthName(m: any) {
let a = ['', 'Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December']
return a[m]
}
onUpdated(() => {
let date
if (YY.value && MM.value && DD.value) {
date = YY.value
date += '-'
let _m = MM.value + ''
_m = _m.padStart(2, '0')
date += _m
date += '-'
let _d = DD.value + ''
_d = _d.padStart(2, '0')
date += _d
}
if (date) {
emits('update:model-value',date)
}
})
</script>
<style></style>