hbis-dateStrip 组件

用于展示一周的日历信息，支持多种切换方式和选中样式的 UniApp 组件。

功能特性

• ✅ 展示一周的日期信息
• ✅ 支持三种选中样式：背景高亮、圆点高亮、圆角高亮
• ✅ 支持日期范围限制
• ✅ 支持禁用过去/未来日期
• ✅ 支持横向滚动，当日期范围超过7天时
• ✅ 支持自定义颜色和背景色
• ✅ 支持自定义可见天数
• ✅ 支持星期和日期一起滚动，完全对齐
• ✅ 日期数字宽度占满父组件
• ✅ 支持自定义插槽
• ✅ 兼容 UniApp 所有平台
• ✅ Vue 3 + TypeScript 开发
• ✅ 支持按需引入

安装

方式一：通过主组件库安装

pnpm add @hbis-uni/components

方式二：单独安装

pnpm add @hbis-uni/hbis-dateStrip

使用

基本使用

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    @dateClick="handleDateClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { hbisDateStrip } from '@hbis-uni/components';

const selectedDate = ref(new Date());

const handleDateClick = (date) => {
  console.log('点击日期:', date);
};
</script>

不同高亮类型

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    highlightType="round"
  />
</template>

日期范围限制

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :startDate="startDate"
    :endDate="endDate"
  />
</template>

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

const selectedDate = ref(new Date());
const startDate = ref(new Date('2025-11-01'));
const endDate = ref(new Date('2025-12-31'));
</script>

禁用过去/未来日期

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    disablePast
  />
</template>

横向滚动示例

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :scrollable="true"
    :startDate="new Date('2025-11-01')"
    :endDate="new Date('2025-12-31')"
    @dateClick="handleDateClick"
  />
</template>

自定义颜色和背景色示例

<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :selectedColor="'#ffffff'"
    :normalColor="'#666666'"
    :selectedBgColor="'#ff4d4f'"
    :normalBgColor="'transparent'"
    highlightType="bg"
    @dateClick="handleDateClick"
  />
</template>

自定义插槽

<template>
  <hbis-dateStrip
    v-model="selectedDate"
  >
    <div class="custom-content">
      <button @click="highlightType = 'bg'">背景高亮</button>
      <button @click="highlightType = 'dot'">圆点高亮</button>
      <button @click="highlightType = 'round'">圆角高亮</button>
    </div>
  </hbis-dateStrip>
</template>

API

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | modelValue | Date | Date[] | new Date() | 选中日期，可以是单个日期或日期数组 | | highlightType | 'bg' | 'dot' | 'round' | 'bg' | 选中样式类型：bg(背景色高亮), dot(数字背景色高亮), round(数字背景色圆角高亮) | | startDate | Date | new Date() | 可选日期范围开始 | | endDate | Date | 当前日期+30天 | 可选日期范围结束 | | disablePast | boolean | false | 是否禁用过去的日期 | | disableFuture | boolean | false | 是否禁用未来的日期 | | showToday | boolean | true | 是否显示今天标记 | | scrollable | boolean | false | 是否支持横向滑动日期 | | visibleDays | number | 7 | 可见的天数（默认7天） | | selectedColor | string | '#ffffff' | 选中状态的文字颜色 | | normalColor | string | '#666666' | 正常状态的文字颜色 | | selectedBgColor | string | '#1890ff' | 选中状态的背景颜色 | | normalBgColor | string | 'transparent' | 正常状态的背景颜色 |

事件

| 事件名 | 参数 | 说明 | | --- | --- | --- | | update:modelValue | Date | Date[] | 选中日期变化事件 | | dateClick | DateItem | 日期点击事件，返回点击的日期对象 |

DateItem 类型

interface DateItem {
  date: Date;           // 完整日期对象
  dateString: string;   // 格式化的日期字符串（YYYY-MM-DD）
  day: number;          // 日期（1-31）
  month: number;        // 月份（1-12）
  year: number;         // 年份
  isWeekend: boolean;   // 是否是周末
  weekday: number;      // 星期几（0-6，0表示周日）
}

插槽

| 插槽名 | 说明 | | --- | --- | | default | 自定义内容插槽，用于在组件底部添加自定义内容 |

样式说明

高亮类型

1. 背景高亮 (bg)：选中日期的整个背景高亮
2. 圆点高亮 (dot)：选中日期的数字背景高亮，显示为矩形
3. 圆角高亮 (round)：选中日期的数字背景高亮，显示为圆形

样式类名

| 类名 | 说明 | | --- | --- | | hbis-date-strip | 组件根容器类 | | hbis-date-strip__weekdays | 星期行容器类 | | hbis-date-strip__weekday | 单个星期类 | | hbis-date-strip__weekday--weekend | 周末星期类 | | hbis-date-strip__dates | 日期行容器类 | | hbis-date-strip__date | 单个日期类 | | hbis-date-strip__date--selected | 选中日期类 | | hbis-date-strip__date--today | 今天日期类 | | hbis-date-strip__date--disabled | 禁用日期类 | | hbis-date-strip__date--weekend | 周末日期类 | | hbis-date-strip__date-number | 日期数字类 | | hbis-date-strip__custom | 自定义内容容器类 |

兼容性

| 平台 | 兼容性 | | --- | --- | | H5 | ✅ 支持 | | App (iOS) | ✅ 支持 | | App (Android) | ✅ 支持 | | 微信小程序 | ✅ 支持 | | 支付宝小程序 | ✅ 支持 | | 百度小程序 | ✅ 支持 | | 字节跳动小程序 | ✅ 支持 | | QQ小程序 | ✅ 支持 |

开发说明

组件结构

hbis-dateStrip/
├── src/
│   └── hbis-dateStrip.vue   # 组件源码
├── index.ts                  # 组件入口
├── package.json              # 包配置
└── README.md                 # 组件文档

开发环境

• Vue 3 + TypeScript
• Vite
• UniApp

构建命令

# 构建整个组件库
pnpm run build

示例

完整示例

<template>
  <div class="container">
    <hbis-dateStrip
      v-model="selectedDate"
      :highlightType="highlightType"
      :startDate="startDate"
      :endDate="endDate"
      :disablePast="disablePast"
      :disableFuture="disableFuture"
      @dateClick="handleDateClick"
    >
      <div class="custom-controls">
        <button @click="highlightType = 'bg'">背景高亮</button>
        <button @click="highlightType = 'dot'">圆点高亮</button>
        <button @click="highlightType = 'round'">圆角高亮</button>
        <button @click="toggleDisablePast">
          {{ disablePast ? '启用过去日期' : '禁用过去日期' }}
        </button>
      </div>
    </hbis-dateStrip>
    
    <div class="result">
      <strong>选中日期：</strong>{{ selectedDate.toLocaleDateString() }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { hbisDateStrip } from '@hbis-uni/components';

const selectedDate = ref(new Date());
const highlightType = ref<'bg' | 'dot' | 'round'>('bg');
const startDate = ref(new Date('2025-11-01'));
const endDate = ref(new Date('2025-12-31'));
const disablePast = ref(false);
const disableFuture = ref(false);

const handleDateClick = (date) => {
  console.log('点击日期:', date);
};

const toggleDisablePast = () => {
  disablePast.value = !disablePast.value;
};
</script>

<style>
.container {
  padding: 20px;
}

.custom-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f5ff;
  border-radius: 4px;
}
</style>

注意事项

1. 组件默认显示当前周的日期
2. 确保在使用前正确引入组件样式
3. 支持单个日期和日期范围选择
4. 在 UniApp 中使用时，确保使用 view 标签而非 div 标签
5. 组件宽度默认占满父容器

更新日志

v1.0.8

• ✅ 支持横向滚动，当日期范围超过7天时
• ✅ 支持自定义颜色和背景色
• ✅ 支持自定义可见天数
• ✅ 优化了星期和日期的对齐方式，确保一起滚动
• ✅ 修复了日期数字宽度问题，现在占满父组件
• ✅ 优化了滚动容器样式
• ✅ 完善了文档

v1.0.0

• ✅ 初始版本发布
• ✅ 支持一周日期展示
• ✅ 支持三种选中样式
• ✅ 支持日期范围限制
• ✅ 支持禁用过去/未来日期
• ✅ 支持自定义插槽

许可证

ISC

贡献

欢迎提交 Issue 和 Pull Request！

联系方式

如果有任何问题或建议，欢迎通过以下方式联系：

• GitHub: your-github
• Email: [email protected]

HBIS UNI Components Library

打造高质量的 UniApp 组件库