<template>
  <view class="date-picker" @tap="openCalendar">
    <view class="date-display">
      <text class="date-label">选择日期</text>
      <text class="date-value" v-if="selectedDate">{{ selectedDate }}</text>
      <text class="date-placeholder" v-else>请点击日期图标选择</text>
    </view>
    <view class="date-icon">
      <uni-icons type="calendar-filled" size="24" color="#1890ff"></uni-icons>
    </view>
  </view>
  
  <!-- 日历组件 -->
  <Calendar
    :visible="calendarVisible"
    :price-data="priceData"
    mode="single"
    @close="handleCalendarClose"
    @select="handleDateSelect"
  />
</template>

<script setup>
import { ref } from 'vue'
import Calendar from './index.vue'

const calendarVisible = ref(false)
const selectedDate = ref('')

const openCalendar = () => {
  calendarVisible.value = true
}

const handleCalendarClose = () => {
  calendarVisible.value = false
}

const handleDateSelect = (data) => {
  selectedDate.value = data.date
  calendarVisible.value = false
}
</script>

演示文件

year-demo.vue - 全年日历演示（推荐）
demo.vue - 完整的交互演示页面
example.vue - 详细的使用示例，包含单选和范围选择

跨年日历

组件支持显示从当前月份到明年同月份的13个月日历，用户可以连续选择入住和离店日期：

点击第一个日期设置入住日期
点击第二个日期设置离店日期
自动显示"入住"和"离店"标签
支持滚动浏览跨年日期范围

1. 弹窗容器结构

1.1 弹窗基础框架

实现遮罩层背景（半透明黑色）
弹窗居中显示，支持垂直居中
弹窗圆角设计（建议12px）
弹窗阴影效果
弹窗动画效果（淡入淡出）

1.2 弹窗头部区域

标题文字："低价日历"
副标题文字："以下价格为单晚参考价"
右上角关闭按钮（X图标）
关闭按钮点击交互
头部区域背景色和分割线

2. 日历主体结构

2.1 周标题行

显示周几标题：一、二、三、四、五、六、日
周标题居中对齐
周标题字体样式（灰色、小字号）

2.2 月份导航

月份标题显示："2024年5月"、"2024年6月"
月份标题居中显示
月份标题字体加粗
支持上下滑动切换月份（可选）

3. 日期网格系统

3.1 日期格子基础

7列网格布局（对应周一到周日）
每个格子固定宽高比
格子间距设计
格子圆角设计

3.2 日期内容显示

日期数字显示（居中对齐）
价格信息显示（¥449格式）
日期数字字体大小和颜色
价格字体大小和颜色（较小、灰色）

3.3 日期状态管理

普通可选日期（白色背景）
当前选中日期（蓝色背景，白色文字）
入住日期标记（"入住"标签）
离店日期标记（"离店"标签）
选择范围内日期（浅蓝色背景）
不可选日期（灰色背景，禁用状态）

4. 交互功能实现

4.1 日期选择逻辑

单击日期选择功能
日期范围选择（入住-离店）
选择状态视觉反馈
选择完成后的回调事件

4.2 用户体验优化

点击动画效果
触摸反馈
防止快速重复点击
选择范围的视觉连接线（可选）

5. 数据处理功能

5.1 价格数据管理

价格数据结构设计
价格数据绑定到日期
价格格式化显示
无价格数据的处理

5.2 日期计算功能

月份天数计算
月份第一天星期几计算
跨月份日期处理
日期有效性验证

6. 响应式适配

6.1 移动端适配

触摸屏操作优化
不同屏幕尺寸适配
横竖屏切换适配
安全区域适配（刘海屏等）

6.2 字体和尺寸适配

字体大小响应式调整
格子尺寸响应式调整
间距响应式调整

技术实现细节

组件接口设计

Props 属性

props: {
  // 弹窗显示控制
  visible: {
    type: Boolean,
    default: false,
    required: true
  },
  
  // 价格数据对象
  priceData: {
    type: Object,
    default: () => ({}),
    // 格式: { '2024-05-17': 449, '2024-05-18': 399 }
  },
  
  // 默认选中日期
  defaultValue: {
    type: [String, Array],
    default: '',
    // 单选: '2024-05-17'
    // 范围选择: ['2024-05-17', '2024-05-19']
  },
  
  // 选择模式
  mode: {
    type: String,
    default: 'single',
    validator: (value) => ['single', 'range'].includes(value)
  },
  
  // 最小可选日期
  minDate: {
    type: String,
    default: () => new Date().toISOString().split('T')[0]
  },
  
  // 最大可选日期
  maxDate: {
    type: String,
    default: ''
  },
  
  // 禁用日期数组
  disabledDates: {
    type: Array,
    default: () => []
  },
  
  // 自定义标签
  customLabels: {
    type: Object,
    default: () => ({})
    // 格式: { '2024-05-17': '入住', '2024-05-19': '离店' }
  }
}

Events 事件

// 日期选择事件
this.$emit('select', {
  date: '2024-05-17',
  price: 449,
  mode: 'single'
})

// 范围选择事件
this.$emit('range-select', {
  startDate: '2024-05-17',
  endDate: '2024-05-19',
  startPrice: 449,
  endPrice: 399,
  totalDays: 2
})

// 弹窗关闭事件
this.$emit('close')

// 月份切换事件
this.$emit('month-change', {
  year: 2024,
  month: 5,
  direction: 'next' // 'prev' | 'next'
})

// 日期点击事件（包含所有点击）
this.$emit('date-click', {
  date: '2024-05-17',
  price: 449,
  disabled: false,
  selected: true
})

核心算法实现

日期计算工具函数

// 获取月份天数
getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate()
}

// 获取月份第一天是星期几
getFirstDayOfMonth(year, month) {
  return new Date(year, month - 1, 1).getDay()
}

// 生成日期网格数据
generateCalendarGrid(year, month) {
  const daysInMonth = this.getDaysInMonth(year, month)
  const firstDay = this.getFirstDayOfMonth(year, month)
  const grid = []
  
  // 填充空白格子
  for (let i = 0; i < firstDay; i++) {
    grid.push(null)
  }
  
  // 填充日期
  for (let day = 1; day <= daysInMonth; day++) {
    const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
    grid.push({
      date: dateStr,
      day: day,
      price: this.priceData[dateStr] || null,
      disabled: this.isDateDisabled(dateStr),
      selected: this.isDateSelected(dateStr),
      inRange: this.isDateInRange(dateStr),
      label: this.customLabels[dateStr] || ''
    })
  }
  
  return grid
}

选择状态管理

data() {
  return {
    selectedDates: [],
    currentMonth: new Date().getMonth() + 1,
    currentYear: new Date().getFullYear(),
    isRangeSelecting: false,
    rangeStart: null,
    rangeEnd: null
  }
},

methods: {
  handleDateClick(dateInfo) {
    if (dateInfo.disabled) return
    
    if (this.mode === 'single') {
      this.selectedDates = [dateInfo.date]
      this.$emit('select', dateInfo)
    } else if (this.mode === 'range') {
      this.handleRangeSelection(dateInfo)
    }
  },
  
  handleRangeSelection(dateInfo) {
    if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
      // 开始新的范围选择
      this.rangeStart = dateInfo.date
      this.rangeEnd = null
      this.isRangeSelecting = true
    } else {
      // 完成范围选择
      this.rangeEnd = dateInfo.date
      this.isRangeSelecting = false
      
      // 确保开始日期小于结束日期
      if (new Date(this.rangeStart) > new Date(this.rangeEnd)) {
        [this.rangeStart, this.rangeEnd] = [this.rangeEnd, this.rangeStart]
      }
      
      this.$emit('range-select', {
        startDate: this.rangeStart,
        endDate: this.rangeEnd,
        startPrice: this.priceData[this.rangeStart],
        endPrice: this.priceData[this.rangeEnd],
        totalDays: this.calculateDaysBetween(this.rangeStart, this.rangeEnd)
      })
    }
  }
}

样式设计规范

颜色系统

// 主色调
$primary-color: #1890ff;
$primary-light: #e6f7ff;
$primary-dark: #0050b3;

// 中性色
$text-primary: #262626;
$text-secondary: #8c8c8c;
$text-disabled: #bfbfbf;
$background-white: #ffffff;
$background-gray: #f5f5f5;
$border-color: #d9d9d9;

// 状态色
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;

尺寸规范

// 弹窗尺寸
$modal-width: 350px;
$modal-max-height: 80vh;
$modal-border-radius: 12px;
$modal-padding: 20px;

// 日期格子尺寸
$date-cell-size: 44px;
$date-cell-gap: 2px;
$date-cell-border-radius: 6px;

// 字体大小
$font-size-title: 18px;
$font-size-subtitle: 14px;
$font-size-date: 16px;
$font-size-price: 12px;
$font-size-label: 10px;

开发实施计划

第一阶段：基础框架（1-2天）

创建组件基础结构
实现弹窗容器和遮罩
添加头部区域和关闭功能
建立基础样式系统

第二阶段：日历核心（2-3天）

实现日期计算算法
构建日期网格布局
添加周标题和月份显示
实现基础日期显示

第三阶段：交互功能（2-3天）

实现日期选择逻辑
添加范围选择功能
实现状态管理和视觉反馈
添加价格数据绑定

第四阶段：优化完善（1-2天）

添加动画效果
优化移动端体验
完善边界情况处理
性能优化和测试

使用示例

基础用法

<template>
  <div>
    <button @click="showCalendar = true">选择日期</button>
    
    <Calendar
      :visible="showCalendar"
      :price-data="priceData"
      mode="range"
      @range-select="handleRangeSelect"
      @close="showCalendar = false"
    />
  </div>
</template>

<script>
import Calendar from '@/components/Calendar'

export default {
  components: {
    Calendar
  },
  
  data() {
    return {
      showCalendar: false,
      priceData: {
        '2024-05-17': 449,
        '2024-05-18': 399,
        '2024-05-19': 459,
        '2024-05-20': 429
      }
    }
  },
  
  methods: {
    handleRangeSelect(range) {
      console.log('选择范围:', range)
      this.showCalendar = false
      
      // 处理选择结果
      this.processBooking(range)
    },
    
    processBooking(range) {
      // 处理预订逻辑
      const { startDate, endDate, totalDays } = range
      // ...
    }
  }
}
</script>

高级用法

<template>
  <Calendar
    :visible="visible"
    :price-data="priceData"
    :custom-labels="customLabels"
    :disabled-dates="disabledDates"
    :min-date="minDate"
    :max-date="maxDate"
    mode="range"
    @range-select="handleSelect"
    @month-change="handleMonthChange"
    @close="handleClose"
  />
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      priceData: {
        // 动态价格数据
      },
      customLabels: {
        '2024-05-17': '入住',
        '2024-05-19': '离店'
      },
      disabledDates: [
        '2024-05-16', // 已满房
        '2024-05-25'  // 维护日
      ],
      minDate: '2024-05-01',
      maxDate: '2024-12-31'
    }
  },
  
  methods: {
    handleMonthChange(monthInfo) {
      // 动态加载月份数据
      this.loadMonthData(monthInfo.year, monthInfo.month)
    },
    
    async loadMonthData(year, month) {
      // 从API获取价格数据
      const data = await this.fetchPriceData(year, month)
      this.priceData = { ...this.priceData, ...data }
    }
  }
}
</script>

测试用例

单元测试

日期计算函数测试
选择逻辑测试
价格数据绑定测试
边界条件测试

集成测试

用户交互流程测试
不同设备适配测试
性能压力测试

可访问性测试

键盘导航测试
屏幕阅读器兼容性
色彩对比度检查

README.md Unescape Escape

日历组件 (Calendar Component)

功能需求分析

交互使用方式

基础用法

演示文件

跨年日历

1. 弹窗容器结构

1.1 弹窗基础框架

1.2 弹窗头部区域

2. 日历主体结构

2.1 周标题行

2.2 月份导航

3. 日期网格系统

3.1 日期格子基础

3.2 日期内容显示

3.3 日期状态管理

4. 交互功能实现

4.1 日期选择逻辑

4.2 用户体验优化

5. 数据处理功能

5.1 价格数据管理

5.2 日期计算功能

6. 响应式适配

6.1 移动端适配

6.2 字体和尺寸适配

技术实现细节

组件接口设计

Props 属性

Events 事件

核心算法实现

日期计算工具函数

选择状态管理

样式设计规范

颜色系统

尺寸规范

开发实施计划

第一阶段：基础框架（1-2天）

第二阶段：日历核心（2-3天）

第三阶段：交互功能（2-3天）

第四阶段：优化完善（1-2天）

使用示例

基础用法

高级用法

测试用例

单元测试

集成测试

可访问性测试

README.md