fix: Datetime input does not auto updates when min/max changes quasarframework#300

Author: rstoenescu

src/vue-components/datetime/Datetime.vue

@@ -132,6 +132,14 @@ export default {
       return this.value ? moment(this.value).format(format) : ''
     }
   },
+  watch: {
+    min () {
+      this.__normalizeAndEmit()
+    },
+    max () {
+      this.__normalizeAndEmit()
+    }
+  },
   methods: {
     open () {
       if (!this.disable && !this.readonly) {
@@ -165,6 +173,13 @@ export default {
     },
     __update () {
       this.$emit('input', this.model)
+    },
+    __normalizeAndEmit () {
+      if (this.value) {
+        this.$nextTick(() => {
+          this.$emit('input', this.__normalizeValue(moment(this.value)).format(this.format))
+        })
+      }
     }
   }
 }

src/vue-components/datetime/DatetimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="q-datetime-range">
     <q-datetime
       v-model="model.from"
       :type="type"
@@ -15,6 +15,8 @@
       :static-label="staticLabel"
       :readonly="readonly"
       :disable="disable"
+      :class="className"
+      :style="css"
     ></q-datetime>
 
     <q-datetime
@@ -32,6 +34,8 @@
       :static-label="staticLabel"
       :readonly="readonly"
       :disable="disable"
+      :class="className"
+      :style="css"
     ></q-datetime>
   </div>
 </template>
@@ -50,6 +54,8 @@ export default {
       },
       required: true
     },
+    className: [String, Object],
+    css: [String, Object],
     type: {
       type: String,
       default: 'date'

src/vue-components/datetime/datetime.ios.styl

@@ -1,3 +1,5 @@
+$datetime-range-space    ?= 10px
+
 .q-datetime
   max-width 100vw
   border 1px solid $grey-4
@@ -116,3 +118,12 @@ body.desktop .q-datetime-col-wrapper
     > div
       padding 0 6px
       text-align center
+
+.q-datetime-range
+  &.space-between
+    > div + div
+      margin-left $datetime-range-space
+  &.full-width
+    display flex
+    > div
+      flex 1 1 auto

src/vue-components/datetime/datetime.mat.styl

@@ -1,4 +1,5 @@
-$datetime-color             ?= $primary
+$datetime-color          ?= $primary
+$datetime-range-space    ?= 10px
 
 .q-datetime
   color rgba(0, 0, 0, .87)
@@ -165,6 +166,15 @@ for $pos in 0..12
     top (((1 + sin($degree * 1deg)) * 100%) / 2)
     left (((1 + cos($degree * 1deg)) * 100%) / 2)
 
+.q-datetime-range
+  &.space-between
+    > div + div
+      margin-left $datetime-range-space
+  &.full-width
+    display flex
+    > div
+      flex 1 1 auto
+
 @media (max-width $layout-medium-max)
   .q-datetime-ampm
     margin-left 1.5rem