Select initial view of datetime via property quasarframework#1303

Author: rstoenescu

dev/components/form/color-picker.vue

@@ -80,8 +80,8 @@ export default {
       return `rgb${color.a !== void 0 ? 'a' : ''}(${color.r},${color.g},${color.b}${color.a !== void 0 ? `,${color.a / 100}` : ''})`
     },
     setToYellow () {
-      this.modelHex = '#ffff00'
-      this.modelHexa = '#ffff00FF'
+      this.modelHex = '#FFFF00'
+      this.modelHexa = '#FFFF00FF'
       this.modelRgb = {r: 255, g: 255, b: 0}
       this.modelRgba = {r: 255, g: 255, b: 0, a: 100}
     }

dev/components/form/datetime.vue

@@ -43,6 +43,7 @@
       <q-datetime float-label="Float Label" v-model="model" type="date" />
       <q-datetime hide-underline float-label="Float Label (hide underline)" v-model="model" type="date" />
 
+      <q-datetime default-view="month" v-model="model" type="date" float-label="Default view" />
       <q-datetime inverted v-model="model" type="date" />
       <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" />
@@ -134,6 +135,8 @@
         </small>
       </p>
       <q-inline-datetime v-model="model" type="date" />
+      <br><br>
+      <q-inline-datetime default-view="year" v-model="model" type="date" />
 
       <p class="caption">
         Time

src/components/color/color.ios.styl

@@ -48,6 +48,7 @@
     z-index -1
 
 .q-color-hue .q-slider-track
+  border-radius 2px
   background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) // @stylint ignore
   opacity 1
   height $dot-size * .8

src/components/color/color.mat.styl

@@ -48,6 +48,7 @@
     z-index -1
 
 .q-color-hue .q-slider-track
+  border-radius 2px
   background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) // @stylint ignore
   opacity 1
   height $dot-size * .8

src/components/datetime/QDatetime.vue

@@ -46,6 +46,7 @@
         :format24h="format24h"
         :first-day-of-week="firstDayOfWeek"
         :color="color"
+        :default-view="defaultView"
         class="no-border"
       >
         <div class="row q-datetime-controls modal-buttons-top">
@@ -77,6 +78,7 @@
         :max="max"
         :format24h="format24h"
         :first-day-of-week="firstDayOfWeek"
+        :default-view="defaultView"
         :color="color"
         class="no-border"
         :class="{'full-width': $q.theme === 'ios'}"
@@ -199,6 +201,15 @@ export default {
     },
 
     __onFocus () {
+      const target = this.$refs.target
+      if (this.defaultView) {
+        if (target.view !== this.defaultView) {
+          target.setView(this.defaultView)
+        }
+        else {
+          target.__scrollView()
+        }
+      }
       this.focused = true
       this.$emit('focus')
     },

src/components/datetime/QInlineDatetime.mat.vue

@@ -262,11 +262,17 @@ export default {
 
     switch (this.type) {
       case 'time':
-        view = 'hour'
+        view = this.defaultView && ['hour', 'minute'].includes(this.defaultView)
+          ? this.defaultView
+          : 'hour'
         break
       case 'date':
+        view = this.defaultView && ['year', 'month', 'day'].includes(this.defaultView)
+          ? this.defaultView
+          : 'day'
+        break
       default:
-        view = 'day'
+        view = this.defaultView || 'day'
         break
     }
 
@@ -282,18 +288,8 @@ export default {
         this.view = ['date', 'datetime'].includes(this.type) ? 'day' : 'hour'
       }
     },
-    view (value) {
-      if (value !== 'year' && value !== 'month') {
-        return
-      }
-
-      let
-        view = this.$refs.selector,
-        rows = value === 'year' ? this.year - this.yearMin : this.month - this.monthMin
-
-      this.$nextTick(() => {
-        view.scrollTop = rows * height(view.children[0].children[0]) - height(view) / 2.5
-      })
+    view () {
+      this.__scrollView()
     }
   },
   computed: {
@@ -441,9 +437,37 @@ export default {
     },
 
     /* helpers */
+    setView (view) {
+      if (this.type === 'time') {
+        if (['hour', 'minute'].includes(view)) {
+          this.view = view
+        }
+      }
+      else if (this.type === 'date') {
+        if (['year', 'month', 'day'].includes(view)) {
+          this.view = view
+        }
+      }
+      else {
+        this.view = view
+      }
+    },
     __pad (unit, filler) {
       return (unit < 10 ? filler || '0' : '') + unit
     },
+    __scrollView () {
+      if (this.view !== 'year' && this.view !== 'month') {
+        return
+      }
+
+      let
+        el = this.$refs.selector,
+        rows = this.view === 'year' ? this.year - this.yearMin : this.month - this.monthMin
+
+      this.$nextTick(() => {
+        el.scrollTop = rows * height(el.children[0].children[0]) - height(el) / 2.5
+      })
+    },
     __dragStart (ev) {
       stopAndPrevent(ev)
 
@@ -498,6 +522,9 @@ export default {
     __getRepeatEasing (from = 300, step = 10, to = 100) {
       return cnt => cnt ? Math.max(to, from - cnt * cnt * step) : 100
     }
+  },
+  mounted () {
+    this.__scrollView()
   }
 }
 </script>

src/components/datetime/datetime-props.js

@@ -38,6 +38,10 @@ export const inline = {
     type: [Boolean, Number],
     default: 0,
     validator: v => [true, false, 0].includes(v)
+  },
+  defaultView: {
+    type: String,
+    validator: v => ['year', 'month', 'day', 'hour', 'minute'].includes(v)
   }
 }