<template>
<div>
<label for="dateInput">Select a Date:</label>
<input
id="dateInput"
type="date"
v-model="selectedDate"
@input="handleInput"
/>
<p>Selected Date: {{ formattedDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: null,
};
},
computed: {
formattedDate() {
if (!this.selectedDate) return '';
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(this.selectedDate).toLocaleDateString(undefined, options);
},
},
methods: {
handleInput() {
this.$emit('date-selected', this.formattedDate);
},
},
};
</script>
<style scoped>
/ Add your component-specific styles here /
</style>