Add time picker examples

Author: Nathan Reyes

docs/.vuepress/components/guide/datepicker/24hr.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="example">
+    <v-date-picker v-model="date" mode="dateTime" is24hr>
+      <template v-slot="{ inputValue, inputEvents }">
+        <input
+          class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+          :value="inputValue"
+          v-on="inputEvents"
+        />
+      </template>
+    </v-date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: new Date(),
+    };
+  },
+};
+</script>

docs/.vuepress/components/guide/datepicker/minute-increment.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="example">
+    <v-date-picker v-model="date" mode="dateTime" :minute-increment="5" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: new Date(),
+    };
+  },
+};
+</script>

docs/api/v2.0/datepicker.md

@@ -34,6 +34,22 @@ sidebarDepth: 2
 
 **Default Value:** `false`
 
+### `is24hr`
+
+**Type:** Boolean
+
+**Description:** Use 24-hr time picker and input format.
+
+**Default Value:** `false`
+
+### `minute-increment`
+
+**Type:** Number
+
+**Description:** Increment amount for the minute `select` options.
+
+**Default Value:** 1
+
 ### `is-required`
 
 **Type:** Boolean

docs/changelog/v2.0.md

@@ -335,4 +335,11 @@ export default {
 };
 ```
 
-[Read more abount providing custom `input` elements.](/datepicker.html#input)
+[Read more abount providing custom `input` elements.](/datepicker.html#input)
+
+## v2.1.1
+
+### Enhancements
+
+Time picker styling improvements.
+Display non-matched `minute` options when using `minute-interval`

docs/datepicker.md

@@ -101,12 +101,91 @@ data() {
 }
 ```
 
+#### 24-hr Mode
+
+Use the `is24hr` prop to adjust the hour `select` element and default input format for 24-hr mode.
+
+<guide-datepicker-24hr />
+
+```html
+<v-date-picker v-model="date" mode="dateTime" is24hr>
+  <template v-slot="{ inputValue, inputEvents }">
+    <input
+      class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+      :value="inputValue"
+      v-on="inputEvents"
+    />
+  </template>
+</v-date-picker>
+```
+
+```js
+export default {
+  data() {
+    return {
+      date: new Date(),
+    };
+  },
+};
+```
+
+#### Minute Increments
+
+Use the `minute-increment` prop to set custom intervals for the minute `select` options.
+
+<guide-datepicker-minute-increment />
+
+```html
+<v-date-picker v-model="date" mode="dateTime" :minute-increment="5" />
+```
+
+```js
+export default {
+  data() {
+    let date = new Date();
+    date.setMinutes(0, 0, 0);
+    return {
+      date,
+    };
+  },
+};
+```
+
+:::warning
+If the bound date does not match of the the minute options derived by the `minute-increment` amount, the accurate `minute` amount will be displayed, but this option will be disabled.
+:::
+
 ### Time
 
 To limit user selction to only time components (hours, minutes, seconds), use `mode: 'time'`.
 
 <guide-datepicker-with-value mode="time" />
 
+```html
+<div>
+  <div class="flex mb-2" v-if="mode !== 'date'">
+    <label class="text-gray-600 font-medium"><input class="mr-1" type="radio" value="" v-model="timezone">Local</label>
+    <label class="text-gray-600 font-medium ml-3"><input class="mr-1" type="radio" value="utc" v-model="timezone">UTC</label>
+  </div>
+  <v-date-picker mode="time" v-model="date" :timezone="timezone" />
+  <div class="flex items-baseline mt-2">
+    <span class="text-gray-600 font-semibold tracking-wide">Date (ISO):</span>
+    <span class="text-gray-800 ml-2">{{ date.toISOString() }}</span>
+  </div>
+</div>
+```
+
+```js
+export default {
+  data() {
+    return {
+      date: new Date(),
+      timezone: '',
+    };
+  },
+}
+```
+
 ## Model Config :tada:
 
 *Introduced in **`v2.0.0`***