<template>
  <q-date
    v-on="$listeners"
    v-bind="$attrs"
    color="background"
    text-color="dark"
    default-view="Calendar"
  >
    <slot />
  </q-date>
</template>

<style scoped lang="sass">
::v-deep
  .q-btn .q-icon,
  .q-btn .q-spinner,
  .q-field__append .q-icon
    font-size: 16px
    color: $blue-grey-3

  .q-date__calendar-weekdays
    color: $blue-grey

    & > div
      opacity: 1

  .q-date__calendar-item > div,
  .q-date__calendar-item button
    border-radius: 4px
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { QDate } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QDate },
})
export default class UiDatePicker extends Vue {}
</script>
