feat: 24hr format for Material Timepicker quasarframework#271

Author: rstoenescu

dev/components/form/datetime.vue

@@ -53,6 +53,9 @@
       </p>
       <q-datetime v-model="model" type="time"></q-datetime>
 
+      <p class="caption">Time 24hr Format</p>
+      <q-datetime v-model="model" type="time" format24h></q-datetime>
+
       <p class="caption">Date & Time</p>
       <q-datetime v-model="model" type="datetime"></q-datetime>
 
@@ -143,6 +146,9 @@
       </p>
       <q-inline-datetime v-model="model" type="time"></q-inline-datetime>
 
+      <p class="caption">Time 24hr Format</p>
+      <q-inline-datetime v-model="model" type="time" format24h></q-inline-datetime>
+
       <p class="caption">Date & Time</p>
       <q-inline-datetime v-model="model" type="datetime"></q-inline-datetime>
 

src/components/datetime/InlineDatetimeMat.vue

@@ -49,7 +49,7 @@
             {{ __pad(minute) }}
           </span>
         </div>
-        <div class="q-datetime-ampm column justify-around">
+        <div v-if="!format24h" class="q-datetime-ampm column justify-around">
           <div
             :class="{active: am}"
             class="q-datetime-link"
@@ -156,12 +156,23 @@
               <div class="q-datetime-clock-pointer" :style="clockPointerStyle" :class="{hidden: !value}">
                 <span></span>
               </div>
-              <div
-                v-for="n in 12"
-                class="q-datetime-clock-position"
-                :class="['q-datetime-clock-pos-' + n, value && n === hour ? 'active' : '']"
-              >
-                {{ n }}
+              <div v-if="format24h">
+                <div
+                  v-for="n in 24"
+                  class="q-datetime-clock-position fmt24"
+                  :class="[`q-datetime-clock-pos-${n-1}`, value && (n - 1) === hour ? 'active' : '']"
+                >
+                  {{ n - 1 }}
+                </div>
+              </div>
+              <div v-else>
+                <div
+                  v-for="n in 12"
+                  class="q-datetime-clock-position"
+                  :class="['q-datetime-clock-pos-' + n, value && n === hour ? 'active' : '']"
+                >
+                  {{ n }}
+                </div>
               </div>
             </div>
           </div>
@@ -201,7 +212,7 @@
 <script>
 import { moment } from '../../deps'
 import { inline as props } from './datetime-props'
-import { height, width, offset } from '../../utils/dom'
+import { height, width, offset, cssTransform } from '../../utils/dom'
 import { between } from '../../utils/format'
 import { position } from '../../utils/event'
 import { QIcon } from '../icon'
@@ -374,7 +385,10 @@ export default {
     },
 
     hour () {
-      return convertToAmPm(this.date.hour())
+      const h = this.date.hour()
+      return this.format24h
+        ? h
+        : convertToAmPm(h)
     },
     minute () {
       return this.date.minute()
@@ -384,14 +398,10 @@ export default {
     },
     clockPointerStyle () {
       let
-        divider = this.view === 'minute' ? 60 : 12,
+        divider = this.view === 'minute' ? 60 : (this.format24h ? 24 : 12),
         degrees = Math.round((this.view === 'minute' ? this.minute : this.hour) * (360 / divider)) - 180
 
-      return {
-        '-webkit-transform': 'rotate(' + degrees + 'deg)',
-        '-ms-transform': 'rotate(' + degrees + 'deg)',
-        'transform': 'rotate(' + degrees + 'deg)'
-      }
+      return cssTransform(`rotate(${degrees}deg)`)
     },
     editable () {
       return !this.disable && !this.readonly
@@ -439,11 +449,16 @@ export default {
       if (!this.editable) {
         return
       }
-      this.view = 'minute'
-      value = this.__parseTypeValue('hour', value) % 12
+      value = this.__parseTypeValue('hour', value)
 
-      if (!this.am) {
-        value += 12
+      if (this.format24h) {
+        value = value % 24
+      }
+      else {
+        value = value % 12
+        if (!this.am) {
+          value += 12
+        }
       }
 
       this.date.hour(value)
@@ -489,6 +504,7 @@ export default {
       ev.stopPropagation()
       ev.preventDefault()
       this.dragging = false
+      this.view = 'minute'
     },
     __updateClock (ev) {
       let
@@ -508,7 +524,7 @@ export default {
       }
 
       if (this.view === 'hour') {
-        this.setHour(Math.round(angle / 30))
+        this.setHour(Math.round(angle / (this.format24h ? 15 : 30)))
       }
       else {
         this.setMinute(Math.round(angle / 6))

src/components/datetime/QDatetime.vue

@@ -21,7 +21,14 @@
       :disable="disable || readonly"
       :anchor-click="false"
     >
-      <q-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border">
+      <q-inline-datetime
+        v-model="model"
+        :type="type"
+        :min="min"
+        :max="max"
+        :format24h="format24h"
+        class="no-border"
+      >
         <div class="modal-buttons row full-width">
           <q-btn v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></q-btn>
           <div class="auto"></div>
@@ -40,7 +47,14 @@
       :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="min"
+        :max="max"
+        :format24h="format24h"
+        class="no-border full-width"
+      >
         <div class="modal-buttons row full-width">
           <q-btn v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></q-btn>
           <div class="auto"></div>

src/components/datetime/QDatetimeRange.vue

@@ -18,6 +18,7 @@
       :readonly="readonly"
       :disable="disable"
       :align="align"
+      :format24h="format24h"
       class="inline"
       :class="className"
       :style="css"
@@ -41,6 +42,7 @@
       :readonly="readonly"
       :disable="disable"
       :align="align"
+      :format24h="format24h"
       class="inline"
       :class="className"
       :style="css"

src/components/datetime/datetime-props.js

@@ -25,6 +25,7 @@ export const input = {
     type: String,
     default: 'Cancel'
   },
+  format24h: Boolean,
   defaultSelection: String,
   floatLabel: String,
   stackedLabel: String,
@@ -56,6 +57,7 @@ export const inline = {
     type: String,
     default: ''
   },
+  format24h: Boolean,
   readonly: Boolean,
   disable: Boolean
 }

src/components/datetime/datetime.mat.styl

@@ -163,8 +163,14 @@ body.desktop .q-datetime-clock-position:not(.active):hover
 for $pos in 0..12
   $degree = (270 + 30 * $pos)
   .q-datetime-clock-pos-{$pos}
-    top (((1 + sin($degree * 1deg)) * 100%) / 2)
-    left (((1 + cos($degree * 1deg)) * 100%) / 2)
+    top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
+    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2)
+
+for $pos in 0..23
+  $degree = (270 + 15 * $pos)
+  .q-datetime-clock-pos-{$pos}.fmt24
+    top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
+    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2)
 
 .q-datetime-range
     display flex

src/components/layout/index.js

@@ -1,9 +1,9 @@
 import QLayout from './QLayout.vue'
-import QSideLink from './QSideLink.vue'
 import QFixedPosition from './QFixedPosition.vue'
+import QSideLink from './QSideLink.vue'
 
 export {
   QLayout,
-  QSideLink,
-  QFixedPosition
+  QFixedPosition,
+  QSideLink
 }