fix(QDatePicker): clone, isValid, inferDateFormat, add formatModel (quasarframework#1489)

Author: pdanpdan

dev/components/form/datetime.vue

@@ -51,6 +51,18 @@
       <q-datetime inverted color="secondary" stack-label="Stack Label" v-model="model" type="date" />
       <q-datetime inverted color="amber" float-label="Float Label" v-model="model" type="date" />
 
+      <p class="caption">Format Model</p>
+      <div class="bg-secondary text-white">
+        Model: <em>{{modelVar}}</em> <strong>{{modelVarType}}</strong>
+      </div>
+      <div class="bg-secondary text-white">
+        Formatted: <em>{{modelVarFormatted}}</em>
+      </div>
+      <q-datetime @change="value => log('@change', value)" @input="value => log('@input', value)" v-model="modelVar" type="date" clearable stack-label="Format Model 'auto'" format-model="auto" />
+      <q-datetime @change="value => log('@change', value)" @input="value => log('@input', value)" v-model="modelVar" type="date" clearable stack-label="Format Model 'date'" format-model="date" />
+      <q-datetime @change="value => log('@change', value)" @input="value => log('@input', value)" v-model="modelVar" type="date" clearable stack-label="Format Model 'number'" format-model="number" />
+      <q-datetime @change="value => log('@change', value)" @input="value => log('@input', value)" v-model="modelVar" type="date" clearable stack-label="Format Model 'string'" format-model="string" />
+
       <p class="caption">
         Lazy Input
       </p>
@@ -85,12 +97,12 @@
       <q-datetime v-model="model" popover type="date"     float-label="Pick Date" />
       <q-datetime v-model="model" popover type="time"     float-label="Pick Time" />
       <q-datetime v-model="model" popover type="datetime" float-label="Pick DateTime" />
-      
+
       <p class="caption">With explicit modal</p>
       <q-datetime v-model="model" modal type="date"     float-label="Pick Date" />
       <q-datetime v-model="model" modal type="time"     float-label="Pick Time" />
       <q-datetime v-model="model" modal type="datetime" float-label="Pick DateTime" />
-      
+
       <p class="caption">With Label</p>
       <q-datetime v-model="model" type="date" label="Pick Date" />
 
@@ -204,6 +216,7 @@ export default {
     return {
       // model: '2016-09-18T10:45:00.000Z',
       model: undefined,
+      modelVar: undefined,
       // model: 0,
       defaultSelection: '2016-09-18T10:45:00.000Z',
 
@@ -218,6 +231,12 @@ export default {
   computed: {
     modelFormatted () {
       return date.formatDate(this.model, this.format)
+    },
+    modelVarFormatted () {
+      return date.formatDate(this.modelVar, this.format)
+    },
+    modelVarType () {
+      return typeof this.modelVar
     }
   },
   methods: {

src/components/datetime/QDatetime.js

@@ -6,9 +6,8 @@ import { QInputFrame } from '../input-frame'
 import { QPopover } from '../popover'
 import QDatetimePicker from './QDatetimePicker'
 import { QBtn } from '../btn'
-import { formatDate, isSameDate, isValid } from '../../utils/date'
+import { clone, formatDate, isSameDate, isValid } from '../../utils/date'
 import { QModal } from '../modal'
-import clone from '../../utils/clone'
 
 const contentCss = __THEME__ === 'ios'
   ? {
@@ -152,6 +151,7 @@ export default {
             type: this.type,
             min: this.min,
             max: this.max,
+            formatModel: this.formatModel,
             format24h: this.format24h,
             firstDayOfWeek: this.firstDayOfWeek,
             defaultView: this.defaultView,

src/components/datetime/datetime-mixin.js

@@ -3,6 +3,7 @@ import { inline as props } from './datetime-props'
 import {
   convertDateToFormat,
   getDateBetween,
+  inferDateFormat,
   startOfDate,
   isSameDate,
   isValid
@@ -25,7 +26,7 @@ export default {
       },
       set (val) {
         const date = getDateBetween(val, this.pmin, this.pmax)
-        const value = convertDateToFormat(date, this.value)
+        const value = convertDateToFormat(date, this.formatModel === 'auto' ? inferDateFormat(this.value) : this.formatModel)
         this.$emit('input', value)
         this.$nextTick(() => {
           if (!isSameDate(value, this.value)) {

src/components/datetime/datetime-props.js

@@ -17,9 +17,7 @@ export const inline = {
   type: {
     type: String,
     default: 'date',
-    validator (value) {
-      return ['date', 'time', 'datetime'].includes(value)
-    }
+    validator: v => ['date', 'time', 'datetime'].includes(v)
   },
   color: {
     type: String,
@@ -34,6 +32,11 @@ export const inline = {
     default: null
   },
   firstDayOfWeek: Number,
+  formatModel: {
+    type: String,
+    default: 'auto',
+    validator: v => ['auto', 'date', 'number', 'string'].includes(v)
+  },
   format24h: {
     type: [Boolean, Number],
     default: 0,

src/utils/date.js

@@ -48,6 +48,9 @@ function getChange (date, mod, add) {
 }
 
 export function isValid (date) {
+  if (typeof date === 'number') {
+    return true
+  }
   const t = Date.parse(date)
   return isNaN(t) === false
 }
@@ -208,19 +211,30 @@ export function getDayOfYear (date) {
   return getDateDiff(date, startOfDate(date, 'year'), 'days') + 1
 }
 
-export function convertDateToFormat (date, example) {
-  if (!date) {
-    return
-  }
-
+export function inferDateFormat (example) {
   if (isDate(example)) {
-    return date
+    return 'date'
   }
   if (typeof example === 'number') {
-    return date.getTime()
+    return 'number'
+  }
+
+  return 'string'
+}
+
+export function convertDateToFormat (date, type) {
+  if (!date && date !== 0) {
+    return
   }
 
-  return formatDate(date)
+  switch (type) {
+    case 'date':
+      return date
+    case 'number':
+      return date.getTime()
+    default:
+      return formatDate(date)
+  }
 }
 
 export function getDateBetween (date, min, max) {
@@ -520,3 +534,7 @@ export function formatDate (val, mask = 'YYYY-MM-DDTHH:mm:ss.SSSZ') {
 export function matchFormat (format = '') {
   return format.match(token)
 }
+
+export function clone (value) {
+  return isDate(value) ? new Date(value.getTime()) : value
+}