From 26f53deb9fdc95f62d1183ce53e1c7ee22e2064e Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 19 Jan 2024 17:16:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9(=E5=99=A8)=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                      |   1 +
 locales/zh-CN.yaml                   |   1 +
 src/router/modules/components.ts     |   8 ++
 src/views/components/time-picker.vue | 197 +++++++++++++++++++++++++++
 4 files changed, 207 insertions(+)
 create mode 100644 src/views/components/time-picker.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index e427a0464..82686ba92 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 47ca1fc52..f1081ba04 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -59,6 +59,7 @@ menus:
   hsColorPicker: 颜色选择器
   hsDatePicker: 日期选择器
   hsDateTimePicker: 日期时间选择器
+  hsTimePicker: 时间选择器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 83f433784..142e2df73 100644
--- a/src/router/modules/components.ts
+++ b/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",
diff --git a/src/views/components/time-picker.vue b/src/views/components/time-picker.vue
new file mode 100644
index 000000000..92d63b53e
--- /dev/null
+++ b/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>