日期选择器配置

通过给 dateRange / datetimeRange 类型的 item 配置 pickerOptions，可以透传给内部 tiny-date-picker 的 picker-options，支持快捷选项（shortcuts）、自定义周首日（firstDayOfWeek）、选中回调（onPick）以及禁用日期（disabledDate）。

其中 disabledDate 会与组件内部基于 maxTimeLength / min / max 的禁用逻辑合并：任一返回 true 即禁用该日期，方便在保留内置校验的同时叠加自定义限制。

注意

search-box 内部使用两个独立的单日期选择器（开始 / 结束），并非一个 daterange 范围选择器。因此 shortcuts 的 onClick 中应通过 picker.$emit('pick', 单个日期) 回填单个日期（emit 数组无法回填），快捷项会填入当前打开的那个选择器。建议使用「今天 / 昨天 / 一周前 / 一个月前」这类单日期快捷项。

<template>
  <ClientOnly>
    <tiny-search-box v-model="tags" :items="items" @change="onChange" />
  </ClientOnly>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const tags = ref([]);

const items = reactive([
  {
    label: "日期",
    field: "date",
    type: "dateRange",
    format: "yyyy/MM/dd",
    // 通过 pickerOptions 透传给内部 tiny-date-picker，这里演示快捷选项与自定义周首日
    // 注意：search-box 内部使用两个独立的单日期选择器（开始/结束），并非一个 daterange 范围选择器，
    // 因此 shortcuts 的 onClick 需 emit 单个日期（emit 数组无法回填），快捷项会填入当前打开的那个选择器
    pickerOptions: {
      firstDayOfWeek: 1,
      shortcuts: [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          },
        },
        {
          text: "一周前",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          },
        },
        {
          text: "一个月前",
          onClick(picker) {
            const date = new Date();
            date.setMonth(date.getMonth() - 1);
            picker.$emit("pick", date);
          },
        },
      ],
      // 自定义 disabledDate，会与组件内部禁用逻辑合并（任一返回 true 即禁用）
      disabledDate(time) {
        // 禁用今天之后的所有日期
        return time.getTime() > Date.now();
      },
    },
  },
  {
    label: "时间日期",
    field: "datetime",
    type: "datetimeRange",
    format: "yyyy/MM/dd HH:mm:ss",
    pickerOptions: {
      firstDayOfWeek: 7,
      shortcuts: [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          },
        },
      ],
    },
  },
]);

const onChange = (newFilters, oldFilters) => {
  console.log("changeEvent:", newFilters, oldFilters);
};
</script>