Ability to use Date objects and numbers as values for model, min and max properties of Datetime

build/script.build.stylus.js

@@ -8,6 +8,7 @@ var
   themes = ['ios', 'mat'],
   nonStandalone = process.argv[2] === 'simple' || process.argv[3] === 'simple',
   version = process.env.VERSION || require('../package.json').version,
+  pathList = [path.join(__dirname, '../src/themes/')],
   banner =
     '/*!\n' +
     ' * Quasar Framework v' + version + '\n' +
@@ -22,7 +23,7 @@ themes.forEach(function (theme) {
     data
 
   deps = stylus(readFile(src))
-    .set('paths', [path.join(__dirname, '../src/themes/')])
+    .set('paths', pathList)
     .deps()
 
   data = compile([src].concat(deps))
@@ -31,30 +32,32 @@ themes.forEach(function (theme) {
   writeFile('dist/quasar.' + theme + '.styl', data)
 
   // write compiled CSS file
-  stylus(data).render(function (err, css) {
-    if (err) {
-      logError('Stylus could not compile ' + src.gray + ' file...')
-      throw err
-    }
+  stylus(data)
+    .set('paths', pathList)
+    .render(function (err, css) {
+      if (err) {
+        logError('Stylus could not compile ' + src.gray + ' file...')
+        throw err
+      }
 
-    // write unprefixed non-standalone version
-    writeFile('dist/quasar.' + theme + '.css', css)
+      // write unprefixed non-standalone version
+      writeFile('dist/quasar.' + theme + '.css', css)
 
-    if (nonStandalone) {
-      return
-    }
+      if (nonStandalone) {
+        return
+      }
 
-    // write auto-prefixed standalone version
-    postcss([autoprefixer]).process(css).then(function (result) {
-      result.warnings().forEach(function (warn) {
-        console.warn(warn.toString())
-      })
-      writeFile('dist/quasar.' + theme + '.standalone.css', result.css)
-      cssnano.process(result.css).then(function (result) {
-        writeFile('dist/quasar.' + theme + '.standalone.min.css', result.css)
+      // write auto-prefixed standalone version
+      postcss([autoprefixer]).process(css).then(function (result) {
+        result.warnings().forEach(function (warn) {
+          console.warn(warn.toString())
+        })
+        writeFile('dist/quasar.' + theme + '.standalone.css', result.css)
+        cssnano.process(result.css).then(function (result) {
+          writeFile('dist/quasar.' + theme + '.standalone.min.css', result.css)
+        })
       })
     })
-  })
 })
 
 function logError (err) {

dev/components/form/datetime.vue

@@ -54,6 +54,12 @@
       <p class="caption">Date & Time</p>
       <q-datetime v-model="model" type="datetime"></q-datetime>
 
+      <p class="caption">Date with number model, specified display format, min and max values</p>
+      <q-datetime v-model="numModel" type="date" :min="dateMin" :max="numMax" format="L"></q-datetime>
+
+      <p class="caption">Time with Date model</p>
+      <q-datetime v-model="dateModel" type="time"></q-datetime>
+
       <p class="caption">With Label</p>
       <q-datetime v-model="model" type="date" label="Pick Date"></q-datetime>
 
@@ -157,6 +163,10 @@ export default {
   data () {
     return {
       model: '2016-09-18T10:45:00.000Z',
+      dateModel: new Date(2016, 1, 15, 11, 22),
+      numModel: new Date(2017, 2, 15).getTime(),
+      dateMin: new Date(2017, 2, 10),
+      numMax: new Date(2018, 2, 10).getTime(),
       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').add(1, 'month').format()

src/vue-components/datetime/Datetime.vue

@@ -15,7 +15,7 @@
       @open="__setModel()"
       :disable="disable || readonly"
     >
-      <q-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border">
+      <q-inline-datetime v-model="model" :type="type" :min="minTime" :max="maxTime" class="no-border">
         <div class="modal-buttons row full-width">
           <button v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
@@ -34,7 +34,7 @@
       :position-classes="position"
       :content-css="css"
     >
-      <q-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border full-width">
+      <q-inline-datetime v-model="model" :type="type" :min="minTime" :max="maxTime" class="no-border full-width">
         <div class="modal-buttons row full-width">
           <button v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
@@ -67,20 +67,33 @@ let contentCSS = {
 }
 
 export default {
-  props: extend({
-    value: {
-      type: String,
-      required: true
+  props: extend(
+    {
+      value: {
+        type: [String, Number, Date],
+        required: true
+      }
+    },
+    props,
+    {
+      min: {
+        type: [String, Number, Date],
+        default: ''
+      },
+      max: {
+        type: [String, Number, Date],
+        default: ''
+      }
     }
-  }, props),
+  ),
   data () {
     let data = Platform.is.desktop ? {} : {
       css: contentCSS[theme],
       position: theme === 'ios' ? 'items-end justify-center' : 'items-center justify-center',
       transition: theme === 'ios' ? 'q-modal-bottom' : 'q-modal',
       classNames: theme === 'ios' ? '' : 'minimized'
     }
-    data.model = this.value
+    data.model = this.__valueToString(this.value)
     data.desktop = Platform.is.desktop
     return data
   },
@@ -102,6 +115,12 @@ export default {
       }
 
       return this.value ? moment(this.value).format(format) : ''
+    },
+    minTime () {
+      return this.__valueToString(this.min)
+    },
+    maxTime () {
+      return this.__valueToString(this.max)
     }
   },
   watch: {
@@ -123,8 +142,19 @@ export default {
       this.$refs.popup.close(fn)
     },
     clear () {
+      const type = typeof this.value
+      let value
       this.$refs.popup.close()
-      this.$emit('input', '')
+      if (type === 'number') {
+        value = 0
+      }
+      else if (type === 'object') {
+        value = null
+      }
+      else {
+        value = ''
+      }
+      this.$emit('input', value)
     },
     __open () {
       if (!this.desktop) {
@@ -140,16 +170,41 @@ export default {
       }
       return value
     },
+    __valueToString (value) {
+      return typeof value === 'string' || value == null
+                ? (value || '')
+                : moment(value).format()
+    },
     __setModel () {
-      this.model = this.value || this.__normalizeValue(moment(this.defaultSelection)).format()
+      const value = this.value
+      this.model = value || value === 0
+                    ? this.__valueToString(value)
+                    : this.__normalizeValue(moment(this.defaultSelection)).format()
+    },
+    __valueToData (value) {
+      let data = typeof value === 'string'
+                          ? moment(value)
+                          : value
+      const type = typeof this.value
+      if (type === 'number') {
+        data = data.valueOf()
+      }
+      else if (type === 'object') {
+        data = data.toDate()
+      }
+      else {
+        data = data.format()
+      }
+      return data
     },
     __update () {
-      this.$emit('input', this.model)
+      this.$emit('input', this.__valueToData(this.model))
     },
     __normalizeAndEmit () {
       this.$nextTick(() => {
-        if (this.value) {
-          this.$emit('input', this.__normalizeValue(moment(this.value)).format(this.format))
+        const value = this.value
+        if (value) {
+          this.$emit('input', this.__valueToData(this.__normalizeValue(moment(value))))
         }
       })
     }