Update examples

Author: Nathan Reyes

docs/.vuepress/components/github/682.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <v-date-picker :mode="mode" v-model="date">
+      <template #footer>
+        This is a test
+      </template>
+    </v-date-picker>
+    <v-calendar>
+      <template #footer>
+        This is a test
+      </template>
+    </v-calendar>
+  </div>
+</template>
+
+<script>
+// export const title = 'v-date-picker is-dark turns the field dark as well';
+
+export default {
+  githubTitle: 'Date picker footer slot',
+  data() {
+    return {
+      mode: 'time',
+      date: new Date(),
+    };
+  },
+};
+</script>

docs/.vuepress/components/github/999.vue

@@ -32,7 +32,8 @@
           >
         </label>
         <label for="range" class="ml-2">
-          <input id="range" type="checkbox" v-model="isRange" /><span class="ml-2"
+          <input id="range" type="checkbox" v-model="isRange" /><span
+            class="ml-2"
             >Range</span
           >
         </label>
@@ -78,14 +79,15 @@
       <!--Date picker-->
       <div v-if="!isRange">
         <v-date-picker
+          class="my-picker"
           v-model="date"
           :mode="mode"
           :model-config="dateConfig"
           :is24hr="is24hr"
           :minute-increment="minuteIncrement"
           :masks="masks"
           :timezone="timezone"
-          :popover="{ visibility: 'hover-focus' }"
+          :popover="popover"
           :is-dark="dark"
         >
           <template v-slot="{ inputValue, inputEvents }" v-if="!inline">
@@ -109,7 +111,7 @@
           :minute-increment="minuteIncrement"
           :masks="masks"
           :timezone="timezone"
-          :popover="{ visibility: 'hover-focus' }"
+          :popover="popover"
           :is-dark="dark"
           is-range
         >
@@ -165,11 +167,15 @@ export default {
         // input: 'MM/DD/YYYY h:mm A',
       },
       minDate: new Date(),
-      isRange: true,
+      isRange: false,
       is24hr: false,
       minuteIncrement: 1,
-      inline: true,
+      inline: false,
       dark: false,
+      popover: {
+        visibility: 'hover',
+        transition: 'fade',
+      },
     };
   },
   methods: {