feat: 添加时间选择(器)示例

locales/en.yaml

@@ -59,6 +59,7 @@ menus:
   hsColorPicker: Color Picker
   hsDatePicker: Date Picker
   hsDateTimePicker: DateTimePicker
+  hsTimePicker: TimePicker
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -59,6 +59,7 @@ menus:
   hsColorPicker: 颜色选择器
   hsDatePicker: 日期选择器
   hsDateTimePicker: 日期时间选择器
+  hsTimePicker: 时间选择器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

src/router/modules/components.ts

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

src/views/components/time-picker.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "TimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+/** 时间选择器 */
+const value = ref("");
+const value1 = ref("");
+const value3 = ref();
+
+const value2 = ref(new Date(2016, 9, 10, 18, 30));
+
+const makeRange = (start: number, end: number) => {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+const disabledHours = () => {
+  return makeRange(0, 16).concat(makeRange(19, 23));
+};
+const disabledMinutes = (hour: number) => {
+  if (hour === 17) {
+    return makeRange(0, 29);
+  }
+  if (hour === 18) {
+    return makeRange(31, 59);
+  }
+};
+const disabledSeconds = (hour: number, minute: number) => {
+  if (hour === 18 && minute === 30) {
+    return makeRange(1, 59);
+  }
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+
+/** 时间选择 */
+const value4 = ref("");
+const value5 = ref("");
+const startTime = ref("");
+const endTime = ref("");
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/time-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-space wrap>
+        <p class="text-[15px]">鼠标滚轮进行选择</p>
+        <el-time-picker
+          v-model="value"
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <p class="text-[15px]">箭头进行选择</p>
+        <el-time-picker
+          v-model="value1"
+          arrow-control
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+      <el-divider />
+
+      <p class="mb-2">限制时间选择范围</p>
+      <el-time-picker
+        v-model="value2"
+        class="!w-[140px]"
+        :disabled-hours="disabledHours"
+        :disabled-minutes="disabledMinutes"
+        :disabled-seconds="disabledSeconds"
+        placeholder="Arbitrary time"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-divider />
+
+      <p class="mb-2">任意时间范围</p>
+      <el-time-picker
+        v-model="value3"
+        class="!w-[220px]"
+        is-range
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-card>
+
+    <el-card shadow="never" class="mt-4">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/time-select.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            时间选择
+          </el-link>
+        </div>
+      </template>
+
+      <p class="mb-2">固定时间点</p>
+      <el-time-select
+        v-model="value4"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="08:30"
+        step="00:15"
+        end="18:30"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">时间格式</p>
+      <el-time-select
+        v-model="value5"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="00:00"
+        step="00:30"
+        end="23:59"
+        format="hh:mm A"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">固定时间范围</p>
+      <el-space wrap>
+        <el-time-select
+          v-model="startTime"
+          placeholder="开始时间"
+          class="!w-[140px]"
+          :max-time="endTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <el-time-select
+          v-model="endTime"
+          placeholder="结束时间"
+          class="!w-[140px]"
+          :min-time="startTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+    </el-card>
+  </div>
+</template>