feat: 添加日期选择器组件示例

locales/en.yaml

@@ -57,6 +57,7 @@ menus:
   hstypeit: Typeit
   hsjsoneditor: JSON Editor
   hsColorPicker: Color Picker
+  hsDatePicker: Date Picker
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -57,6 +57,7 @@ menus:
   hstypeit: 打字机
   hsjsoneditor: JSON编辑器
   hsColorPicker: 颜色选择器
+  hsDatePicker: 日期选择器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

src/router/modules/components.ts

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

src/views/components/check-button.vue

@@ -91,16 +91,15 @@ watch(size, val =>
   <el-card shadow="never">
     <template #header>
       <div class="card-header">
-        <span class="font-medium">
-          可选按钮
-          <br />
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
           <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>
-        </span>
+        </el-space>
       </div>
     </template>
     <p class="mb-2">单选（紧凑风格的按钮样式）</p>

src/views/components/date-picker.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "DatePicker"
+});
+
+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 disabledDate = (time: Date) => {
+  return time.getTime() > Date.now();
+};
+
+const value1 = ref("");
+const value2 = ref("");
+const value3 = ref("");
+const value4 = ref("");
+
+const value5 = 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 value6 = ref("");
+const shortcuts2 = [
+  {
+    text: "本月",
+    value: [new Date(), new Date()]
+  },
+  {
+    text: "今年",
+    value: () => {
+      const end = new Date();
+      const start = new Date(new Date().getFullYear(), 0);
+      return [start, end];
+    }
+  },
+  {
+    text: "六个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 6);
+      return [start, end];
+    }
+  }
+];
+
+const value7 = ref("");
+const dateFormat = ref("");
+
+const value8 = ref("");
+
+const value9 = ref("2023-10-30");
+const holidays = [
+  "2023-10-22",
+  "2023-10-23",
+  "2023-10-24",
+  "2023-10-25",
+  "2023-10-26",
+  "2023-10-27",
+  "2023-10-28",
+  "2023-10-29",
+  "2023-10-30",
+  "2023-10-31"
+];
+
+const isHoliday = ({ dayjs }) => {
+  return holidays.includes(dayjs.format("YYYY-MM-DD"));
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            href="https://element-plus.org/zh-CN/component/date-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="date"
+      class="!w-[160px]"
+      placeholder="请选择"
+      :disabled-date="disabledDate"
+      :shortcuts="shortcuts"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择周、月、年或多个日期</p>
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="week"
+        class="!w-[160px]"
+        format="YYYY年第ww周"
+        placeholder="选择某年中的某周"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value2"
+        type="month"
+        class="!w-[160px]"
+        placeholder="选择某月"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value3"
+        type="year"
+        class="!w-[160px]"
+        placeholder="选择某年"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value4"
+        type="dates"
+        class="!w-[160px]"
+        placeholder="选择多个日期"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-space>
+
+    <p class="mb-2 mt-4">选择一段时间</p>
+    <el-date-picker
+      v-model="value5"
+      type="daterange"
+      class="!w-[240px]"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始时间"
+      end-placeholder="结束时间"
+      :shortcuts="shortcuts1"
+      :popper-options="{
+        placement: 'bottom-start' // 下拉面板出现的位置，或 'top-start'、'bottom-end'、'top-end' 等，具体看 https://popper.js.org/docs/v2/constructors/#options
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择月份范围</p>
+    <el-date-picker
+      v-model="value6"
+      type="monthrange"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      :shortcuts="shortcuts2"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期格式</p>
+    <el-radio-group
+      v-model="dateFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value7 = ''"
+    >
+      <el-radio label="">Date</el-radio>
+      <el-radio label="YYYY-MM-DD">年月日</el-radio>
+      <el-radio label="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value7"
+        type="date"
+        class="!w-[160px]"
+        placeholder="请选择日期"
+        format="YYYY/MM/DD"
+        :value-format="dateFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value7 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">自定义前缀</p>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      class="!w-[160px]"
+      placeholder="请选择日期"
+      :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">自定义内容</p>
+    <el-date-picker
+      v-model="value9"
+      type="date"
+      placeholder="请选择日期"
+      format="YYYY/MM/DD"
+      value-format="YYYY-MM-DD"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <template #default="cell">
+        <div class="cell" :class="{ current: cell.isCurrent }">
+          <span class="text">{{ cell.text }}</span>
+          <span v-if="isHoliday(cell)" class="holiday" />
+        </div>
+      </template>
+    </el-date-picker>
+  </el-card>
+</template>
+
+<style scoped>
+.cell {
+  box-sizing: border-box;
+  height: 30px;
+  padding: 3px 0;
+}
+
+.cell .text {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 auto;
+  line-height: 24px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.cell.current .text {
+  color: #fff;
+  background: #626aef;
+}
+
+.cell .holiday {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: var(--el-color-danger);
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+</style>