uni-app需用uni-calendar插件实现日期范围选择，通过handleConfirm、openCalendar和uni.$on三步完成双向联动，禁用逻辑写在isDisabled回调，自定义内容用before-day-view插槽，注意跨端兼容性与性能优化。
uni-app 里没有原生 date-range 组件，得自己组合或封装
uni-app 官方只提供了基础的 picker mode="date"，单日期选择，不支持范围。要实现「开始日期 + 结束日期」联动、禁用区间外日期、高亮已选范围、限制最小跨度（比如至少选1天）等功能，必须手动处理逻辑，不能靠一个组件开箱即用。
常见错误是直接套用 H5 的 input type="date" 或第三方 Vue 日历库（如 v-calendar），结果在小程序端白屏或报错——uni-app 的跨端机制会拦截非 uni. 开头的 DOM 操作和部分生命周期钩子。
- 优先用
uni-calendar（uni-app 官方维护的插件，插件市场 ID 540），它已适配 App、H5、微信/支付宝/字节小程序 - 若需深度自定义样式（如去掉标题栏、改格子尺寸、加节假日标记），不要改源码，而是通过
custom-item-style和before-month-view等 slot + props 控制 - 禁用逻辑必须写在
isDisabled回调里，而不是靠 CSS 隐藏 —— 小程序不支持动态 :class 绑定到日历单元格上
用 uni-calendar 实现双向联动范围选择的关键三步
核心难点不是显示日历，而是让两个日期“记住彼此”：选了开始日，结束日不能早于它；选了结束日，开始日不能晚于它。官方 demo 是单选，得自己补状态管理。
示例逻辑（Vue 3 setup）：
const startDate = ref('')
const endDate = ref('')
const isRangeMode = ref(true)
<p>// 日历确认回调
const handleConfirm = (e) => {
if (isRangeMode.value) {
const [s, eDate] = e.detail
startDate.value = s
endDate.value = eDate
}
}</p><p>// 手动触发打开日历（因为 uni-calendar 默认不带弹层）
const openCalendar = () => {
// 传入当前已选范围，让日历高亮
uni.$emit('calendar-open', {
startDate: startDate.value,
endDate: endDate.value,
// 限制可选范围：比如最多选30天
maxRange: 30
})
}- 必须监听
uni.$on('calendar-open')在页面 mounted 时注册，否则 emit 无效 -
maxRange参数只影响 UI 禁用（灰色不可点），不校验提交值，最终仍需在handleConfirm里二次判断endDate - startDate - 微信小程序中，
uni-calendar的confirm事件在点击「确定」后才触发，但用户可能直接点击遮罩关闭——此时需监听close事件并重置临时状态
自定义日历格子内容？别动 template，用 before-day-view slot
想在每个日期格子里加小图标（如今天标红点、节假日写「休」、已预约标 ✔️），不能改组件源码，也不该用 v-for 重写整个日历表——那会失去跨端兼容性。
uni-calendar 提供了 before-day-view 插槽，它会在每个日期单元格渲染前注入作用域数据：
<uni-calendar>
<template #before-day-view="{ date, isCurrentMonth, isSelected }">
<view class="day-extra" v-if="isHoliday(date)">休</view>
<view class="dot" v-if="isToday(date)"></view>
</template>
</uni-calendar>-
date是标准 YYYY-MM-DD 字符串，不是 Date 对象，避免跨端解析差异 - 所有自定义 DOM 必须包裹在
<view></view>内，<span></span>或<div> 在小程序里会被忽略<li>性能敏感：<code>isHoliday()这类函数应预计算好缓存（比如把全年节假日存成 Set），别每次渲染都查接口或遍历数组 - App 端卡顿：关闭
uni-calendar的showLunar（农历），它在 nvue 渲染下会触发大量字符串计算；若必须显示农历，改用轻量级转换库（如chinese-lunar）+ 缓存 - H5 端样式错位：全局 CSS 里的
box-sizing: border-box可能被覆盖，给.uni-calendar加!important不可靠，应在page.css中用更具体的选择器重置：.uni-calendar__body .uni-calendar-item { box-sizing: border-box !important; } - 支付宝小程序报错
Cannot read property 'getFullYear' of null：说明传给dateprop 的初始值是null或undefined，必须设为''或合法日期字符串
App 端日期滚动卡顿、H5 端样式错位？检查这三个地方
跨端不一致往往不是日历本身问题，而是环境配置或样式穿透没处理好。
最易被忽略的是：不同端对「今天」的判定逻辑不同——App 端用设备本地时间，H5 用浏览器时区，微信小程序用服务端下发时间。如果业务要求强一致性（比如抢购倒计时），所有日期比对必须统一走服务端时间戳，前端只做格式化展示。
