CalendarTimeMain.vue 2.06 KB
Newer Older
Anton's avatar
Anton committed
1
<template lang="pug">
2
  .row.col-12.gutter-sm
Anton's avatar
Anton committed
3 4 5

    // CALENDAR
    //
6 7 8
    .col-xs-12.col-lg-6
      q-collapsible.border-darker(group="somegroup", icon="event_note", :label="dateString")
        calendar(@update="onUpdateDate", :datetime="datetimeInternal")
Anton's avatar
Anton committed
9 10 11

    // TIME
    //
12 13 14
    .col-xs-12.col-lg-6
      q-collapsible.border-darker(group="somegroup", icon="access_time", :label="timeString")
        slider-time(@update="onUpdateTime", :datetime="datetimeInternal")
Anton's avatar
Anton committed
15 16 17 18 19

</template>

<script>
  import Calendar from './Calendar'
Anton's avatar
Anton committed
20 21
  import SliderTime from './SliderTime'
  import { DateTime } from 'luxon'
Anton's avatar
Anton committed
22 23 24 25 26 27

  export default {
    components: {
      Calendar,
      SliderTime
    },
Anton's avatar
Anton committed
28 29 30 31 32
    props: ['datetime'],
    data () {
      return {
        datetimeInternal: undefined,
        modelCalendar: Date.now()
Anton's avatar
Anton committed
33 34
      }
    },
Anton's avatar
Anton committed
35 36 37 38 39 40 41
    mounted () {
      if (!this.datetime) this.datetimeInternal = DateTime.local().toISO()
    },
    watch: {
      datetime (val) {
        console.log('datetime', val)
        if (val !== this.datetimeInternal) this.datetimeInternal = val
Anton's avatar
Anton committed
42
      },
Anton's avatar
Anton committed
43 44 45 46 47 48 49 50
      datetimeInternal (val) {
        this.$emit('update', val)
      }
    },
    computed: {
      dateString () {
        if (this.datetimeInternal) return DateTime.fromISO(this.datetimeInternal).toLocaleString(DateTime.DATE_FULL)
        return ''
Anton's avatar
Anton committed
51
      },
Anton's avatar
Anton committed
52 53 54 55
      timeString () {
        if (this.datetimeInternal) {
          const dt = DateTime.fromISO(this.datetimeInternal)
          return `${dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)}.${dt.millisecond}`
Anton's avatar
Anton committed
56
        }
Anton's avatar
Anton committed
57
        return ''
Anton's avatar
Anton committed
58 59
      }
    },
Anton's avatar
Anton committed
60 61 62 63 64 65 66 67 68 69 70 71
    methods: {
      onUpdateDate (val) {
        const
          valParts = val.split('T'),
          dateParts = this.datetimeInternal.split('T')
        if (valParts[0] !== dateParts[0]) this.datetimeInternal = [valParts[0], dateParts[1]].join('T')
      },
      onUpdateTime (val) {
        const
          valParts = val.split('T'),
          dateParts = this.datetimeInternal.split('T')
        if (valParts[1] !== dateParts[1]) this.datetimeInternal = [dateParts[0], valParts[1]].join('T')
Anton's avatar
Anton committed
72 73 74 75
      }
    }
  }
</script>