feat: 添加日期时间选择器示例

locales/en.yaml

@@ -58,6 +58,7 @@ menus:
   hsjsoneditor: JSON Editor
   hsColorPicker: Color Picker
   hsDatePicker: Date Picker
+  hsDateTimePicker: DateTimePicker
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -58,6 +58,7 @@ menus:
   hsjsoneditor: JSON编辑器
   hsColorPicker: 颜色选择器
   hsDatePicker: 日期选择器
+  hsDateTimePicker: 日期时间选择器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

src/router/modules/components.ts

@@ -34,6 +34,14 @@ export default {
         title: $t("menus.hsDatePicker")
       }
     },
+    {
+      path: "/components/datetime-picker",
+      name: "DateTimePicker",
+      component: () => import("@/views/components/datetime-picker.vue"),
+      meta: {
+        title: $t("menus.hsDateTimePicker")
+      }
+    },
     {
       path: "/components/icon-select",
       name: "IconSelect",

src/views/components/color-picker.vue

@@ -47,6 +47,9 @@ function onClick() {
       <div class="card-header">
         <el-space wrap :size="40">
           <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
             href="https://element-plus.org/zh-CN/component/color-picker.html"
             target="_blank"
             style="font-size: 16px; font-weight: 800"

src/views/components/date-picker.vue

@@ -134,6 +134,9 @@ watch(size, val =>
       <div class="card-header">
         <el-space wrap :size="40">
           <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
             href="https://element-plus.org/zh-CN/component/date-picker.html"
             target="_blank"
             style="font-size: 16px; font-weight: 800"

src/views/components/datetime-picker.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "DateTimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+const value = ref("");
+const shortcuts = [
+  {
+    text: "今天",
+    value: new Date()
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    }
+  },
+  {
+    text: "一周前",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    }
+  }
+];
+
+const value1 = ref("");
+const datetimeFormat = ref("");
+
+const value2 = ref("");
+const shortcuts1 = [
+  {
+    text: "上周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "上个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "三个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const value3 = ref("");
+const datePickerRef = ref();
+const placement = ref("auto");
+const checkTag = ref([
+  {
+    title: "auto", // https://popper.js.org/docs/v2/constructors/#options
+    checked: false
+  },
+  {
+    title: "auto-start",
+    checked: false
+  },
+  {
+    title: "auto-end",
+    checked: false
+  },
+  {
+    title: "top",
+    checked: false
+  },
+  {
+    title: "top-start",
+    checked: false
+  },
+  {
+    title: "top-end",
+    checked: false
+  },
+  {
+    title: "bottom",
+    checked: false
+  },
+  {
+    title: "bottom-start",
+    checked: false
+  },
+  {
+    title: "bottom-end",
+    checked: false
+  },
+  {
+    title: "right",
+    checked: false
+  },
+  {
+    title: "right-start",
+    checked: false
+  },
+  {
+    title: "right-end",
+    checked: false
+  },
+  {
+    title: "left",
+    checked: false
+  },
+  {
+    title: "left-start",
+    checked: false
+  },
+  {
+    title: "left-end",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  if (size.value === "disabled") return;
+  placement.value = tag.title;
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  // 外部触发日期时间选择面板的打开与关闭
+  curTagMap.value[index].checked
+    ? datePickerRef.value.handleOpen()
+    : datePickerRef.value.handleClose();
+}
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never" :style="{ height: '100vh' }">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/datetime-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            日期时间选择器
+          </el-link>
+          <el-radio-group v-model="size" size="small">
+            <el-radio label="large">大尺寸</el-radio>
+            <el-radio label="default">默认尺寸</el-radio>
+            <el-radio label="small">小尺寸</el-radio>
+            <el-radio label="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+    </template>
+
+    <p class="mb-2">日期和时间点</p>
+    <el-date-picker
+      v-model="value"
+      type="datetime"
+      class="!w-[200px]"
+      placeholder="请选择日期时间"
+      :shortcuts="shortcuts"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期时间格式</p>
+    <el-radio-group
+      v-model="datetimeFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value1 = ''"
+    >
+      <el-radio label="">Date</el-radio>
+      <el-radio label="YYYY-MM-DD h:m:s a">年月日 时分秒</el-radio>
+      <el-radio label="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        class="!w-[200px]"
+        placeholder="请选择日期时间"
+        format="YYYY/MM/DD hh:mm:ss"
+        :value-format="datetimeFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value1 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">日期和时间范围</p>
+    <el-date-picker
+      v-model="value2"
+      type="datetimerange"
+      :shortcuts="shortcuts1"
+      range-separator="至"
+      start-placeholder="开始日期时间"
+      end-placeholder="结束日期时间"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">
+      弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
+    </p>
+    <el-space wrap class="w-[400px]">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <el-date-picker
+      ref="datePickerRef"
+      v-model="value3"
+      type="datetime"
+      class="ml-[15%]"
+      placeholder="请选择日期时间"
+      :popper-options="{
+        placement
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>

src/views/components/el-button.vue

@@ -58,6 +58,9 @@ watch(size, val =>
       <div class="card-header">
         <el-space wrap :size="40">
           <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
             href="https://element-plus.org/zh-CN/component/button.html"
             target="_blank"
             style="font-size: 16px; font-weight: 800"