Calendar.vue 797 Bytes
Newer Older
Anton's avatar
Anton committed
1
<template lang="pug">
2
  div
Anton's avatar
Anton committed
3
    q-datetime-picker.full-width(v-model="datetimeInternal", type="date", dark)
4
    q-btn.full-width(@click="setNow", label="Today", flat)
Anton's avatar
Anton committed
5 6 7
</template>

<script>
Anton's avatar
Anton committed
8
  import { DateTime } from 'luxon'
Anton's avatar
Anton committed
9
  export default {
Anton's avatar
Anton committed
10 11 12 13
    props: ['datetime'],
    data () {
      return {
        datetimeInternal: undefined
Anton's avatar
Anton committed
14 15
      }
    },
Anton's avatar
Anton committed
16 17 18 19 20 21 22 23 24
    mounted () {
      if (this.datetime) this.datetimeInternal = this.datetime
    },
    watch: {
      datetime (val) {
        if (val !== this.datetimeInternal) this.datetimeInternal = val
      },
      datetimeInternal (val) {
        if (val) this.$emit('update', val)
Anton's avatar
Anton committed
25 26
      }
    },
Anton's avatar
Anton committed
27 28 29
    methods: {
      setNow () {
        this.datetimeInternal = DateTime.local().toISO()
Anton's avatar
Anton committed
30 31 32 33 34 35 36
      }
    }
  }
</script>

<style scoped lang="stylus">
</style>