use vuetify time picker, #161

components/DateInput.vue

@@ -34,16 +34,55 @@ v-col(cols=12)
 
   v-row.mt-3.col-md-6.mx-auto
     v-col.col-12.col-sm-6
-      v-select(dense :label="$t('event.from')" :value='fromHour' clearable
+      v-menu(
-        :disabled='!value.from'
+        v-model="menuFromHour"
-        :rules="[$validators.required('event.from')]"
+        :close-on-content-click="false"
-        :items='hourList' @change='hr => change("fromHour", hr)')
+        offset-y
+        :value="fromHour"
+        transition="scale-transition")
+        template(v-slot:activator="{ on, attrs }")
+          v-text-field(
+            :label="$t('event.from')"
+            :value="fromHour"
+            :disabled='!value.from'
+            :prepend-icon="mdiClockTimeFourOutline"
+            :rules="[$validators.required('event.from')]"
+            readonly
+            v-bind="attrs"
+            v-on="on")
+        v-time-picker(
+          v-if="menuFromHour"
+          :value="fromHour"
+          :allowedMinutes='allowedMinutes'
+          format='24hr'
+          @click:minute='menuFromHour=false'
+          @change='hr => change("fromHour", hr)')
+
 
     v-col.col-12.col-sm-6
-      v-select(dense :label="$t('event.due')"
+      v-menu(
-        :disabled='!fromHour'
+        v-model="menuDueHour"
-        :value='dueHour' clearable
+        :close-on-content-click="false"
-        :items='hourList' @change='hr => change("dueHour", hr)')
+        offset-y
+        :value="dueHour"
+        transition="scale-transition")
+        template(v-slot:activator="{ on, attrs }")
+          v-text-field(
+            :label="$t('event.due')"
+            :value="dueHour"
+            :disabled='!fromHour'
+            :prepend-icon="mdiClockTimeEightOutline"
+            :rules="[$validators.required('event.due')]"
+            readonly
+            v-bind="attrs"
+            v-on="on")
+        v-time-picker(
+          v-if="menuDueHour"
+          :value="dueHour"
+          :allowedMinutes='allowedMinutes'
+          format='24hr'
+          @click:minute='menuDueHour=false'
+          @change='hr => change("dueHour", hr)')
 
   List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
 
@@ -53,6 +92,7 @@ import dayjs from 'dayjs'
 import { mapState } from 'vuex'
 import List from '@/components/List'
 import { attributesFromEvents } from '../assets/helper'
+import { mdiClockTimeFourOutline, mdiClockTimeEightOutline  } from '@mdi/js'
 
 export default {
   name: 'DateInput',
@@ -63,6 +103,10 @@ export default {
   },
   data () {
     return {
+      mdiClockTimeFourOutline, mdiClockTimeEightOutline,
+      allowedMinutes: [0, 15, 30, 45],
+      menuFromHour: false,
+      menuDueHour: false,
       type: 'normal',
       page: null,
       events: [],
@@ -96,17 +140,6 @@ export default {
     dueHour () {
       return this.value.due && this.value.dueHour ? dayjs.tz(this.value.due).format('HH:mm') : null
     },
-    hourList () {
-      const hourList = []
-      const leftPad = h => ('00' + h).slice(-2)
-      for (let h = 0; h < 24; h++) {
-        const textHour = leftPad(h < 13 ? h : h - 12)
-        hourList.push({ text: textHour + ':00 ' + (h <= 12 ? 'AM' : 'PM'), value: leftPad(h) + ':00' })
-        hourList.push({ text: textHour + ':30 ' + (h <= 12 ? 'AM' : 'PM'), value: leftPad(h) + ':30' })
-      }
-
-      return hourList
-    },
     whenPatterns () {
       if (!this.value.from) { return }
       const date = dayjs(this.value.from)

pages/add/_edit.vue

@@ -181,7 +181,9 @@ export default {
       if (!this.$refs.form.validate()) {
         this.$nextTick(() => {
           const el = document.querySelector('.v-input.error--text:first-of-type')
-          el.scrollIntoView(false)
+          if (el) {
+            el.scrollIntoView(false)
+          }
         })
         return
       }