datepicker forday

src/components/date-picker.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import dayjs, { Dayjs, OpUnitType } from "dayjs";
 // eslint-disable-next-line
 const dateValidator = (d: any) => dayjs(d).isValid();
@@ -159,6 +159,10 @@ export default defineComponent({
       required: false,
       default: "",
     },
+    target: {
+      type: String as PropType<"day" | "hour">,
+      default: "day",
+    },
   },
   data: function () {
     const now = dayjs().startOf("day");
@@ -234,7 +238,11 @@ export default defineComponent({
       if (v) {
         this.textValue = v.format("YYYY/MM/DD");
         this.$emit("update:modelValue", this.textValue);
-        this.zoom = "day";
+        if (this.target == "day") {
+          this.zoom = "month";
+        } else {
+          this.zoom = "day";
+        }
       } else {
         this.textValue = "";
       }
@@ -256,7 +264,10 @@ export default defineComponent({
     },
     selectItem: function (i: number): void {
       const d = this.pickerContent[i];
-      if (this.zoom == "day") {
+      if (
+        (this.zoom == "day" && this.target == "hour") ||
+        (this.zoom == "month" && this.target == "day")
+      ) {
         if (d.isAfter(this.min) && d.isBefore(this.max)) {
           this.valueObject = d;
         }