feat: Date Range component #201 [work in progress]

dev/components/form/datetime.vue

@@ -12,6 +12,8 @@
         </span>
       </p>
 
+      <q-datetime-range type="datetime" v-model="range" :min="min" :max="max" />
+
       <div class="label bg-secondary text-white">
         Model <span class="right-detail"><em>{{model}}</em></span>
       </div>
@@ -75,10 +77,6 @@
       <p class="caption">Min & Max</p>
       <q-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-datetime>
 
-      <p class="caption">Range</p>
-      <q-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></q-datetime>
-      <q-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></q-datetime>
-
       <p class="caption">Inside of a List</p>
       <div class="list">
         <div class="list-label">Date or Time</div>
@@ -150,10 +148,6 @@
 
       <p class="caption">Min & Max</p>
       <q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-inline-datetime>
-
-      <p class="caption">Range</p>
-      <q-inline-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></q-inline-datetime>
-      <q-inline-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></q-inline-datetime>
     </div>
   </div>
 </template>
@@ -167,12 +161,10 @@ export default {
       model: '2016-09-18T10:45:00.000Z',
       minMaxModel: '2016-10-24T10:40:14.674Z',
       min: moment('2016-10-24T10:40:14.674Z').subtract(5, 'days').format(),
-      max: moment('2016-10-24T10:40:14.674Z').add(4, 'hours').add(10, 'minutes').format(),
+      max: moment('2016-10-24T10:40:14.674Z').add(4, 'hours').add(10, 'minutes').add(1, 'month').format(),
       range: {
-        start: moment('2016-10-24T10:40:14.674Z').subtract(3, 'days').format(),
-        end: moment('2016-10-24T10:40:14.674Z').add(4, 'hours').add(10, 'minutes').add(1, 'month').format(),
-        min: moment('2016-10-24T10:40:14.674Z').subtract(3, 'days').format(),
-        max: moment('2016-10-24T10:40:14.674Z').add(4, 'hours').add(10, 'minutes').add(1, 'month').format()// .add(1, 'month').add(1, 'year')
+        min: '', // moment('2016-10-24T10:40:14.674Z').subtract(3, 'days').format(),
+        max: '' // moment('2016-10-24T10:40:14.674Z').add(4, 'hours').add(10, 'minutes').add(1, 'month').format()
       }
     }
   }

src/vue-components/datetime/DatetimeRange.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <q-datetime
+      v-model="model.min"
+      :type="type"
+      :min="min"
+      :max="model.max || max"
+      :format="format"
+      :no-clear="noClear"
+      :clear-label="clearLabel"
+      :ok-label="okLabel"
+      :cancel-label="cancelLabel"
+      :label="label"
+      :placeholder="placeholder"
+      :static-label="staticLabel"
+      :readonly="readonly"
+      :disable="disable"
+    ></q-datetime>
+
+    <q-datetime
+      v-model="model.max"
+      :type="type"
+      :min="model.min || min"
+      :max="max"
+      :format="format"
+      :no-clear="noClear"
+      :clear-label="clearLabel"
+      :ok-label="okLabel"
+      :cancel-label="cancelLabel"
+      :label="label"
+      :placeholder="placeholder"
+      :static-label="staticLabel"
+      :readonly="readonly"
+      :disable="disable"
+    ></q-datetime>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      validator (val) {
+        if (typeof val.min !== 'string' || typeof val.max !== 'string') {
+          console.error('DatetimeRange requires a {min, max} model.')
+          return false
+        }
+        return true
+      },
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'date'
+    },
+    min: {
+      type: String,
+      default: ''
+    },
+    max: {
+      type: String,
+      default: ''
+    },
+    format: String,
+    noClear: Boolean,
+    clearLabel: {
+      type: String,
+      default: 'Clear'
+    },
+    okLabel: {
+      type: String,
+      default: 'Set'
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Cancel'
+    },
+    label: String,
+    placeholder: String,
+    staticLabel: String,
+    readonly: Boolean,
+    disable: Boolean
+  },
+  computed: {
+    model: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  }
+}
+</script>

src/vue-install.js

@@ -22,6 +22,7 @@ import ContextMenuDesktop from './vue-components/context-menu/ContextMenuDesktop
 import ContextMenuMobile from './vue-components/context-menu/ContextMenuMobile.vue'
 import DataTable from './vue-components/data-table/DataTable.vue'
 import Datetime from './vue-components/datetime/Datetime.vue'
+import DatetimeRange from './vue-components/datetime/DatetimeRange.vue'
 import InlineDatetimeMaterial from './vue-components/datetime/InlineDatetimeMat.vue'
 import InlineDatetimeIOS from './vue-components/datetime/InlineDatetimeIOS.vue'
 import Drawer from './vue-components/drawer/Drawer.vue'
@@ -91,6 +92,7 @@ function registerComponents (_Vue) {
     ['data-table', DataTable],
     ['inline-datetime', theme === 'ios' ? InlineDatetimeIOS : InlineDatetimeMaterial],
     ['datetime', Datetime],
+    ['datetime-range', DatetimeRange],
     ['drawer', Drawer],
     ['drawer-link', DrawerLink],
     ['fab', Fab],