quasar/src/components/datetime/QDatetimeRange.vue at v0.14 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
  <div class="q-datetime-range no-wrap" :class="classes">
    <q-datetime
      v-model="value.from"
      :default-selection="defaultFrom"
      :type="type"
      :min="min"
      :max="value.to || max"
      :format="format"
      :no-clear="noClear"
      :clear-label="clearLabel"
      :ok-label="okLabel"
      :cancel-label="cancelLabel"
      :float-label="floatLabel"
      :stack-label="stackLabel"
      :placeholder="placeholder"
      :disable="disable"
      :error="error"
      :inverted="inverted"
      :dark="dark"
      :before="before"
      :after="after"
      :color="color"
      :align="align"
      :format24h="format24h"
      :monday-first="mondayFirst"
      :saturday-first="saturdayFirst"
      :month-names="monthNames"
      :day-names="dayNames"
      class="col q-datetime-range-left"
      :class="className"
      :style="css"
      @change="__onChange"
    ></q-datetime>

    <q-datetime
      v-model="value.to"
      :default-selection="defaultTo"
      :type="type"
      :min="value.from || min"
      :max="max"
      :format="format"
      :no-clear="noClear"
      :clear-label="clearLabel"
      :ok-label="okLabel"
      :cancel-label="cancelLabel"
      :float-label="floatLabel"
      :stack-label="stackLabel"
      :placeholder="placeholder"
      :disable="disable"
      :error="error"
      :inverted="inverted"
      :dark="dark"
      :before="before"
      :after="after"
      :color="color"
      :align="align"
      :format24h="format24h"
      :monday-first="mondayFirst"
      :saturday-first="saturdayFirst"
      :month-names="monthNames"
      :day-names="dayNames"
      class="col q-datetime-range-right"
      :class="className"
      :style="css"
      @change="__onChange"
    ></q-datetime>
  </div>
</template>

<script>
import FrameMixin from '../input-frame/input-frame-mixin'
import extend from '../../utils/extend'
import { input, inline } from './datetime-props'
import QDatetime from './QDatetime.vue'

export default {
  name: 'q-datetime-range',
  mixins: [FrameMixin],
  components: {
    QDatetime
  },
  props: extend(
    input,
    inline,
    {
      value: {
        type: Object,
        validator: val => 'from' in val && 'to' in val,
        required: true
      },
      className: [String, Object],
      css: [String, Object],
      defaultFrom: [String, Number, Date],
      defaultTo: [String, Number, Date],
      vertical: Boolean
    }
  ),
  computed: {
    classes () {
      return this.vertical ? 'column' : 'row'
    }
  },
  methods: {
    __onChange () {
      this.$nextTick(() => {
        this.$emit('change', this.value)
      })
    }
  }
}
</script>