<template>
  <div>
    <q-input
      :outlined="outlined"
      :dense="dense"
      :filled="filled"
      :class="inputClass"
      :label="label"
      :value="value"
      mask="##/##/####"
      hint="DD/MM/AAAA"
      @input="$emit('input', $event.target.value)"
    >

      <template v-slot:prepend>
        <q-btn icon="event" flat round dense>
          <q-popup-proxy>
            <q-date minimal mask="DD/MM/YYYY" v-model="value" color="indigo-5" v-close-popup/>
          </q-popup-proxy>
        </q-btn>
      </template>
    </q-input>
  </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
        },
        label: {
            type: String
        },
        outlined: {
            type: Boolean,
        },
        dense: {
            type: Boolean,
            default: false
        },
        filled: {
            type: Boolean,
            default: false
        },
        inputClass: {
            type: String,
            default: ''
        }
    }
}
</script>