Merge pull request #118 from phoenixwong/beta

Release v1.1.2

Author: phoenixwong

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.1.2
+
+### New
+
+More powerful `format` string parameter. E.g., you can hide the "hour" column by setting `format="mm:ss"`, or make AM/PM the first column by `format="A hh:ss"`, no extra CSS hacking needed. Please check the Demo page for more examples.
+
+### Improvements
+
+- Support `shift+tab` to navigate to the previous token slot in the Manual Input mode (Thanks to @jost-s).
+- Other minor keyboard navigation enhancements for Manual Input mode
+
 ## v 1.1.1
 
 ### Improvements

demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-timepicker-demo",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

demo/src/components/Samples.vue

@@ -52,6 +52,9 @@ export default {
       autoScrollData1: '08:40',
       autoScrollData2: '5:30:20 pm',
 
+      apmFirst1: 'AM 03:15',
+      apmFirst2: 'pm9時6分',
+
       sideNav: [
         { title: 'Default', anchor: 'default' },
         { title: '12 Hours', anchor: 'format12hours' },
@@ -74,7 +77,8 @@ export default {
         { title: '@focus and @blur event', anchor: 'focusAndBlur' },
         { title: 'Customized Picker Labels', anchor: 'customPickerLabels' },
         { title: 'Adjust Input Width', anchor: 'inputWidth' },
-        { title: 'Auto-Scroll', anchor: 'autoScroll' }
+        { title: 'Auto-Scroll', anchor: 'autoScroll' },
+        { title: 'More Powerful format String', anchor: 'morePowerfulFormat' }
       ]
     }
   },
@@ -704,14 +708,14 @@ section#mostlyUsedSamples
           | <vue-timepicker hour-label="heure" minute-label="minute"></vue-timepicker>
           |
           | <!-- 12-hour format with customized am/pm text -->
-          | <vue-timepicker hour-label="時" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
+          | <vue-timepicker hour-label="时" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
     template(v-slot:preview)
       b 24-hour format with customized hour and minute label
       p
         vue-timepicker(hour-label="heure" minute-label="minute")
       b 12-hour format with customized am/pm text
       p
-        vue-timepicker(hour-label="時" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a")
+        vue-timepicker(hour-label="时" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a")
 
   //- Adjust Input Width
   sample-block#inputWidth
@@ -765,6 +769,80 @@ section#mostlyUsedSamples
       p
         vue-timepicker(auto-scroll format="h:mm:ss a" v-model="autoScrollData2")
 
+  //- More Powerful format String
+  sample-block#morePowerfulFormat
+    template(v-slot:title) More Powerful <code>format</code> String
+    template(slot="description")
+      p The <code>format</code> parameter becomes even more powerful started from <code>v1.1.2</code>.
+    template(v-slot:codes)
+      highlight-code(lang="html" data-title="HTML")
+        pre
+          | &lt;!-- Use without "hour" --&gt;
+          | &lt;vue-timepicker format="mm:ss"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="m:s"&gt;&lt;/vue-timepicker&gt;
+          | &nbsp;
+          | &lt;!-- Make AM/PM the first column in the dropdown --&gt;
+          | &lt;vue-timepicker format="A hh:mm" v-model="apmFirst1"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後"&gt;&lt;/vue-timepicker&gt;
+          | &nbsp;
+          | &lt;!-- Hour + APM only --&gt;
+          | &lt;vue-timepicker format="ha"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="hh A"&gt;&lt;/vue-timepicker&gt;
+          | &nbsp;
+          | &lt;!-- One slot only --&gt;
+          | &lt;!-- Not recommended, though :) --&gt;
+          | &lt;vue-timepicker format="h" input-width="60px"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="mm" input-width="60px"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="ss" input-width="60px"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker format="a" input-width="60px"&gt;&lt;/vue-timepicker&gt;
+      highlight-code(lang="javascript" data-title="JS")
+        pre
+          | // Initial values
+          | data () {
+          |   return {
+          |     apmFirst1: 'AM 03:15',
+          |     // -> Equivalent to:
+          |     // apmFirst1: {
+          |     //   A: 'AM',
+          |     //   hh: '03',
+          |     //   mm: '15'
+          |     // }
+          |
+          |     apmFirst2: 'pm9時6分'
+          |     // -> Equivalent to:
+          |     // apmFirst2: {
+          |     //   a: 'pm',
+          |     //   h: '9',
+          |     //   m: '6'
+          |     // }
+          |   }
+          | }
+    template(v-slot:preview)
+      b Use without "hour"
+      p
+        vue-timepicker(format="mm:ss")
+        | &nbsp;
+        vue-timepicker(format="m:s")
+      b Make AM/PM the first column in the dropdown
+      p
+        vue-timepicker(format="A hh:mm" v-model="apmFirst1")
+        | &nbsp;
+        vue-timepicker(format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後")
+      b Hour + APM only
+      p
+        vue-timepicker(format="ha")
+        | &nbsp;
+        vue-timepicker(format="hh A")
+      b One slot only
+      p
+        vue-timepicker(format="h" input-width="60px")
+        | &nbsp;
+        vue-timepicker(format="mm" input-width="60px")
+        | &nbsp;
+        vue-timepicker(format="ss" input-width="60px")
+        | &nbsp;
+        vue-timepicker(format="a" input-width="60px")
+
   //- Footer Links
   .footer-links
     slot(name="footer-links")