更新记录

v1.0.1（2025-05-16） 下载此版本

版本信息更新： 版本号升级到 v1.0.1 添加了详细的更新日志 列出了主要的兼容性改进 使用示例优化： 简化了 props 的传值方式 更新了事件处理方式，兼容 H5 和小程序 优化了条件判断的写法

v1.0.0（2025-05-16） 下载此版本

暂无

平台兼容性

HotelCalendar 组件说明

组件效果预览

如下图所示，用户可选择入住和离店日期，节假日、周末等特殊日期有高亮显示，区间选择有明显标识：

版本信息

• 版本号：v1.0.1
• 作者：yanzai
• 邮箱：@163.com

更新日志

v1.0.1

• 优化了小程序端的兼容性：
  • 修复了 :key 表达式在非 h5 平台的兼容问题
  • 修复了 :class 和 :style 绑定在小程序中的语法问题
  • 优化了事件传递方式，支持小程序的事件格式
• 代码优化：
  • 移除了模板中的展开运算符语法
  • 优化了样式绑定方式
  • 改进了方法调用方式

v1.0.0

• 初始版本发布
• 支持连续13个月日历渲染
• 支持节假日、周末高亮
• 支持区间选择

组件功能

HotelCalendar 是一款专为酒店、民宿、短租等场景设计的多月区间选择日历组件，支持节假日高亮、区间选择、灵活样式配置、不可选日期控制、选中区间回显、自动计算入住天数等功能。

主要特性

• 支持连续13个月日历渲染（本月起一年）
• 支持选择入住、离店日期，区间高亮
• 节假日、周末、今天、明天等特殊标记
• 不可选日期自动变灰且不可点击（如今天之前、超过一年后的日期）
• 所有高亮、字体、背景色等均可通过props灵活配置
• 支持外部传入选中区间并回显
• 选中后自动关闭日历并通过事件回传选中区间及共几晚

Props 参数说明

事件说明

• @change="onDateChange"
  • 选中入住/离店后自动触发，参数为 [checkInDate, checkOutDate, nights]，如：['2025-5-6', '2025-5-10', 4]
• @close="onClose"
  • 用户点击返回按钮或选中区间后自动关闭日历时触发

返回值说明

• checkInDate：入住日期（如 '2025-5-6'）
• checkOutDate：离店日期（如 '2025-5-10'）
• nights：共几晚（如 4）

使用方法

<template>
  <view>
    <button @click="showCalendar = true">选择日期</button>
    <HotelCalendar
      v-if="showCalendar"
      :value="calendarValue"
      @change="onDateChange"
      @close="showCalendar = false"
      festivalColor="#ff9800"
      weekendColor="#ff9800"
      rangeStartBg="#EE781F"
      rangeEndBg="#EE781F"
      rangeInBg="#FFEBDC"
    />
    <view v-if="calendarValue.length === 3">
      <text>入住：{{ calendarValue[0] }}</text>
      <text style="margin-left: 16rpx;">离店：{{ calendarValue[1] }}</text>
      <text style="margin-left: 16rpx; color: #ff9800;">共{{ calendarValue[2] }}晚</text>
    </view>
  </view>
</template>

<script>
import HotelCalendar from '@/components/HotelCalendar/HotelCalendar.vue';
export default {
  components: { HotelCalendar },
  data() {
    return {
      showCalendar: false,
      calendarValue: []
    };
  },
  methods: {
    onDateChange(e) {
      // 兼容 H5 和小程序的事件格式
      const [checkIn, checkOut, nights] = e.detail || e;
      this.calendarValue = [checkIn, checkOut, nights];
      // 这里可以做后续处理，比如请求接口、页面跳转等
    }
  }
}
</script>

平台兼容性说明

本组件已在以下平台测试通过：

• H5
• 微信小程序
• App

为确保跨平台兼容性，本组件：

1. 使用标准的 props 传值方式
2. 避免使用复杂的表达式和展开运算符
3. 采用兼容的事件处理方式
4. 样式绑定使用数组形式

适用场景

• 酒店、民宿、短租等预订系统
• 需要多月日历、区间选择、节假日高亮的业务场景
• 需要自定义主题、适配多端的项目

如需更多自定义或扩展，欢迎随时联系作者 yanzai（邮箱：@163.com）