uni-calendar需手动接管change事件并用ref记忆startdate和enddate，首次点击设起点，二次点击设终点或交换，随后emit关闭；禁用逻辑须用isdisabled回调；rangestyle控制高亮；日期格式统一为'yyyy-mm-dd'。
uni-calendar 选中后不自动关闭，怎么让它“记住”范围？
uni-calendar 默认是单次点击选起点、再点一次选终点，第三次才确认——这和携程“点一次入住、再点一次离店就提交”的交互差得远。根本原因在于它把 range 模式当成“临时状态”，没持久化已选区间。
必须手动接管 change 事件，并用两个 ref 记住 startDate 和 endDate：
- 第一次点击：设
startDate，不清空endDate（避免用户误点后要重选） - 第二次点击：如果新日期 >
startDate，就设为endDate；否则交换两者（允许用户反向选择） - 每次设置后，主动调用
uni.$emit('calendar-close')关闭弹层（需配合监听逻辑）
禁用逻辑写在 isDisabled 里，别用 CSS 隐藏
小程序里日历单元格的禁用必须走 isDisabled 回调函数，传入的 date 是形如 { year: 2024, month: 6, day: 15 } 的对象。常见错误是想用 v-if 或 :class 控制显隐——小程序端直接失效。
正确写法示例（禁止过去日期 + 最长选 30 天）：
const isDisabled = (date) => {
const today = new Date()
const target = new Date(date.year, date.month - 1, date.day)
const diffDays = Math.floor((target - today) / (1000 * 60 * 60 * 24))
return diffDays 30
}
注意：month 是 1~12，但 Date 构造函数需要 0~11，务必减 1。
高亮已选范围，但不要靠插槽硬塞样式
uni-calendar 的 before-day-view 插槽能自定义每个格子内容，但直接在里面写 <view class="selected"></view> 容易导致 H5 和小程序渲染不一致。更稳妥的方式是利用组件内置的 rangeStyle prop：
- 传入一个对象，如
{ backgroundColor: '#ff6b6b', color: '#fff' } - 它只作用于已选区间内的日期格子，不干扰其他状态（如今天、节假日）
- 避免和
custom-item-style冲突：后者影响所有格子，rangeStyle优先级更高
跨端日期格式必须统一为 'YYYY-MM-DD'
uni-calendar 的 default-date、start-date、end-date 等 props 全部要求字符串格式，且必须是 '2024-06-17' 这种，不能是 new Date() 或时间戳。H5 端若用 toISOString().slice(0,10)，小程序端没问题；但 App 端某些 Android 机型会因时区问题偏移一天，稳妥做法是手动拼接：
const formatDate = (d) => {
const y = d.getFullYear()
const m = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${y}-${m}-${day}`
}
真正容易被忽略的是：小程序里 uni.getSystemInfoSync().platform === 'ios' 时，new Date('2024-06-17').getDate() 可能返回 16——因为解析字符串时默认按 UTC，而本地时区是东八区。所以所有日期计算前，先转成毫秒再处理，别依赖 Date 对象直接解析字符串。
