<template>

  <q-input v-model="selectedDate" :label="placeholder" mask="date" :rules="['date']">
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
          <q-date v-model="selectedDate">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Close" color="primary" flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang="ts">
import { defineComponent, ref ,watchEffect} from 'vue';

export default defineComponent({
  name: 'DatePicker',
  props: {
    placeholder: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const selectedDate = ref(props.modelValue);

    watchEffect(() => {
      emit('update:modelValue', selectedDate.value);
    });

    return {
      selectedDate
    };
  }
});
</script>
