feat: Datetime min-max -- currently in beta

Author: rstoenescu

dev/components/form/datetime.vue

@@ -63,6 +63,13 @@
       <p class="caption">Error State</p>
       <quasar-datetime class="has-error" v-model="model" type="datetime"></quasar-datetime>
 
+      <p class="caption">Min & Max</p>
+      <quasar-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></quasar-datetime>
+
+      <p class="caption">Range <sup>(beta)</sup></p>
+      <quasar-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></quasar-datetime>
+      <quasar-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></quasar-datetime>
+
       <p class="caption">Inside of a List</p>
       <div class="list">
         <div class="list-label">Date or Time</div>
@@ -131,15 +138,33 @@
 
       <p class="caption">Readonly State</p>
       <quasar-inline-datetime readonly v-model="model" type="datetime"></quasar-inline-datetime>
+
+      <p class="caption">Min & Max</p>
+      <quasar-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></quasar-inline-datetime>
+
+      <p class="caption">Range <sup>(beta)</sup></p>
+      <quasar-inline-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></quasar-inline-datetime>
+      <quasar-inline-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></quasar-inline-datetime>
     </div>
   </div>
 </template>
 
 <script>
+import moment from 'moment'
+
 export default {
   data () {
     return {
-      model: '2016-09-18T10:45:00.000Z'
+      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(),
+      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')
+      }
     }
   }
 }

dev/components/web-tests/fast-test.vue

@@ -8,19 +8,10 @@
       For some test that you think it should be persistent,
       make a new *.vue file here or in another folder under /dev/components.
     -->
-
-    <div>{{model}}</div>
-    <quasar-datetime v-model="model"></quasar-datetime>
-    <!--<quasar-inline-datetime type="date" v-model="model"></quasar-inline-datetime>-->
   </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-      model: ''
-    }
-  }
 }
 </script>

dev/main.js

@@ -1,15 +1,14 @@
 import Vue from 'vue'
 import Quasar from 'quasar'
-import moment from 'moment'
-
 import router from './router'
 import App from './App'
 
+import moment from 'moment'
+moment.locale('de')
+
 Quasar.theme.set(__THEME)
 Vue.use(Quasar) // Install Quasar Framework
 
-moment.locale('de')
-
 Quasar.start(() => {
   /* eslint-disable no-new */
   new Vue({

src/vue-components/datetime/Datetime.vue

@@ -7,7 +7,7 @@
     <div v-html="label"></div>
 
     <quasar-popover ref="popup" @open="__setModel()" :disable="disable || readonly">
-      <quasar-inline-datetime v-model="model" :type="type">
+      <quasar-inline-datetime v-model="model" :type="type" :min="min" :max="max">
         <div class="modal-buttons row full-width">
           <button @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
@@ -33,7 +33,7 @@
       :position-classes="position"
       :content-css="css"
     >
-      <quasar-inline-datetime v-model="model" :type="type" class="no-border" style="width: 100%">
+      <quasar-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border full-width">
         <div class="modal-buttons row full-width">
           <button @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
@@ -73,6 +73,14 @@ export default {
       type: String,
       required: true
     },
+    min: {
+      type: [String, Boolean],
+      default: false
+    },
+    max: {
+      type: [String, Boolean],
+      default: false
+    },
     format: String,
     clearLabel: {
       type: String,