vue date filter component

<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>