Merge branch 'release/next'

docs/.vuepress/components/examples/button-dropdown.vue

@@ -5,7 +5,7 @@
         <div class="flex items-center">
           <button
             class="p-2 bg-blue-100 border border-blue-200 hover:bg-blue-200 text-blue-600 rounded-l focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none"
-            @click="togglePopover({ placement: 'auto-start' })"
+            @click="togglePopover()"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

docs/.vuepress/components/github/772.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex flex-col">
+    <div>Time: {{ time ? time : 'Empty' }}</div>
+    <v-date-picker
+      v-model="time"
+      mode="time"
+      :model-config="modelConfig"
+      :popover="{ visibility: 'click' }"
+      timezone="utc"
+    >
+      <template v-slot="{ inputValue, inputEvents }">
+        <input
+          class="px-2 py-1 rounded border-2 focus:border-blue-300 focus:outline-none"
+          :value="inputValue"
+          v-on="inputEvents"
+        />
+      </template>
+    </v-date-picker>
+    <div>Date: {{ date ? date : 'Empty' }}</div>
+    <v-date-picker
+      v-model="date"
+      mode="dateTime"
+      :model-config="modelConfig"
+      :masks="masks"
+      timezone="utc"
+    >
+      <template v-slot="{ inputValue, inputEvents }">
+        <input
+          class="px-2 py-1 rounded border-2 focus:border-blue-300 focus:outline-none"
+          :value="inputValue"
+          v-on="inputEvents"
+        />
+      </template>
+    </v-date-picker>
+    <div>Start: {{ range ? range.start : 'Empty' }}</div>
+    <div>End: {{ range ? range.end : 'Empty' }}</div>
+    <v-date-picker
+      v-model="range"
+      mode="time"
+      :model-config="modelConfig"
+      timezone="utc"
+      is-range
+    >
+      <template v-slot="{ inputValue, inputEvents }">
+        <input
+          class="px-2 py-1 rounded border-2"
+          :value="inputValue.start"
+          v-on="inputEvents.start"
+        />
+        <input
+          class="px-2 py-1 rounded border-2"
+          :value="inputValue.end"
+          v-on="inputEvents.end"
+        />
+      </template>
+    </v-date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  githubTitle: 'Time cannot be null',
+  data() {
+    return {
+      date: '2021-01-15T04:15:00.123Z',
+      range: {
+        start: '2021-01-01T00:00:00.000Z',
+        end: '2021-01-24T00:00:00.000Z',
+      },
+      time: '2021-01-15T04:15:00.000Z',
+      modelConfig: {
+        type: 'string',
+        fillDate: new Date(1920, 0, 1),
+        // timeAdjust: '09:00',
+      },
+      masks: {
+        inputDateTime: 'MM/DD/YYYY',
+      },
+    };
+  },
+};
+</script>

docs/.vuepress/components/github/775.vue

@@ -0,0 +1,42 @@
+<template>
+  <form ref="form">
+    <v-date-picker v-model="range" mode="dateTime" is-range is24hr>
+      <template v-slot="{ inputValue, inputEvents }">
+        <div class="flex justify-center items-center w-full">
+          <!-- <p>{{ item.fieldChName + '：' }}</p> -->
+          <input
+            :value="inputValue.start"
+            v-on="inputEvents.start"
+            class="border px-2 py-1 w-48 rounded focus:outline-none focus:border-indigo-300"
+          />
+          -
+          <input
+            :value="inputValue.end"
+            v-on="inputEvents.end"
+            class="border px-2 py-1 w-48 rounded focus:outline-none focus:border-indigo-300"
+          />
+        </div>
+      </template>
+    </v-date-picker>
+    <button role="button" @click.prevent="clearForm">Clear</button>
+  </form>
+</template>
+
+<script>
+export default {
+  githubTitle: 'vuetify this.$refs.form.reset() can not reset the range inputs',
+  data() {
+    return {
+      range: {
+        start: new Date(2021, 2, 1),
+        end: new Date(2021, 1, 5),
+      },
+    };
+  },
+  methods: {
+    clearForm() {
+      this.$refs.form.reset();
+    },
+  },
+};
+</script>

docs/.vuepress/components/github/776.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-date-picker :attributes="attributes" v-model="date" mode="time" />
+</template>
+
+<script>
+export default {
+  githubTitle: 'Docs/Attributes is [object object]',
+  data() {
+    return {
+      date: new Date(2021, 1, 14),
+      attributes: [
+        {
+          highlight: true,
+          dates: new Date(),
+        },
+      ],
+    };
+  },
+};
+</script>

docs/.vuepress/components/github/777.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-date-picker :popover="{ placement: 'left' }" v-model="date">
+    <template v-slot="{ togglePopover }">
+      <button @click="togglePopover">Click to open calendar</button>
+    </template>
+  </v-date-picker>
+</template>
+
+<script>
+export default {
+  githubTitle: `popover.placement doesn't work`,
+  data() {
+    return {
+      date: new Date(),
+      popover: {
+        placement: 'left',
+      },
+    };
+  },
+};
+</script>

docs/.vuepress/components/github/778.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-date-picker v-model="range" @drag="dragRange = $event" is-range />
+</template>
+
+<script>
+export default {
+  githubTitle: 'Update the model on partial result on range selection',
+  data() {
+    return {
+      range: null,
+      dragRange: null,
+    };
+  },
+  watch: {
+    dragRange(range) {
+      console.log(JSON.stringify(range));
+    },
+  },
+};
+</script>

docs/changelog/v2.0.md

@@ -452,4 +452,16 @@ Fixes single use of `highlight.contentStyle` or `highlight.contentClass`
 ### Bug Fixes
 
 * Fix `on-bottom` class when `trim-weeks` prop is used
-* Fix date range clearing and page adjustment when end date is missing
+* Fix date range clearing and page adjustment when end date is missing
+
+## v2.2.4
+
+### Bug Fixes
+
+* Set `inheritAttrs` to false for calendar pane component
+* Fix null dates for time picker when `mode === 'time'`
+
+### Improvements
+
+* Add `modelConfig.fillDate` parameter to fill missing date parts
+* Provide `popover` options as defaults for `showPopover`, `hidePopover`, `togglePopover`

docs/examples/datepickers.md

@@ -235,7 +235,7 @@ This examples utilizes a dedicated button for displaying the dropdown picker. He
       <div class="flex items-center">
         <button
           class="p-2 bg-blue-100 border border-blue-200 hover:bg-blue-200 text-blue-600 rounded-l focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none"
-          @click="togglePopover({ placement: 'auto-start' })"
+          @click="togglePopover()"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "private": false,
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "author": "Nathan Reyes <nathanreyes@me.com>",

src/components/CalendarPane.vue

@@ -72,6 +72,7 @@ export default {
       [header, weeks],
     );
   },
+  inheritAttrs: false,
   props: {
     page: Object,
     position: Number,