Vant Calendar 如何用 typerange 选择日期区间并用 max-range 限制可选天数【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant在 VantVue 移动 UI 库项目中做一个日期区间选择功能时常见需求是让用户依次点选开始日期和结束日期同时不让区间无限拉长。这个需求只需要在van-calendar上配置两个属性——typerange开启区间选择max-range限制最多可选天数。下面的步骤来自 Vant 官方组件文档 packages/vant/src/calendar/README.zh-CN.md验证方式参考了组件源码和单元测试。准备条件注册 Calendar 组件Calendar 是一个弹层组件需要先注册。文档给出的全局注册方式为import { createApp } from vue; import { Calendar } from vant; const app createApp(); app.use(Calendar);如果页面里还要用到触发入口的van-cell按同样的方式注册 Cell 即可。第一步用 typerange 开启日期区间选择Calendar 的type属性决定选择类型可选值为single单个日期、multiple多个日期、range日期区间默认值是single。把type设为range后confirm事件返回的不再是单个 Date而是数组结构第一项为开始时间第二项为结束时间van-cell title选择日期区间 :valuedate clickshow true / van-calendar v-model:showshow typerange confirmonConfirm /import { ref } from vue; export default { setup() { const date ref(); const show ref(false); const formatDate (date) ${date.getMonth() 1}/${date.getDate()}; const onConfirm (values) { const [start, end] values; show.value false; date.value ${formatDate(start)} - ${formatDate(end)}; }; return { date, show, onConfirm, }; }, };区间模式下有两条默认行为需要注意起止时间不能为同一天。业务上需要允许「当天入住当天离店」这类场景时加上allow-same-day属性放开这个限制。区间不能超出日历的整体日期范围由min-date和max-date定义switch-mode为默认的none时min-date默认为当前日期max-date默认为当前日期六个月后。需要固定范围时显式传入例如:min-datenew Date(2010, 0, 1)月份从 0 开始。第二步用 max-range 限制最多可选天数在typerange的基础上加max-range属性即可指定最多可选天数number | string类型不传则无限制van-calendar v-model:showshow typerange :max-range3 /max-range相关的配套属性当type为range时生效参数说明类型默认值max-range日期区间最多可选天数number | string无限制range-prompt范围选择超过最多可选天数时的提示文案string最多选择 xx 天show-range-prompt超限时是否展示提示文案booleantrueallow-same-day是否允许起止时间为同一天booleanfalse超限时组件会触发over-range事件可以在业务侧记录或做额外处理van-calendar v-model:showshow typerange :max-range3 over-rangeonOverRange confirmonConfirm /不想弹出默认提示时把:show-range-promptfalse加上即可over-range事件仍会触发想换提示文案则传range-prompt它会被直接用作 Toast 文案。完整的可交互示例可以参考仓库中的演示组件 demo/index.vue其中「日期区间最大范围」一栏就是把state.maxRange设为3后绑定到:max-rangestate.maxRange的。如何验证限制已生效设置:max-range3后在日历里先点一个开始日期再点一个距离超过 3 天的日期应观察到以下结果弹出 Toast 提示。默认文案由国际化提供简体中文为「最多选择 3 天」见 zh-CN 语言包 中的rangePrompt。结束日期被自动收回到上限。查看 Calendar.tsx 中checkRange与select的实现超限时选中值会被纠正为「开始日期 (maxRange - 1) 天」。单元测试 test/prop.spec.ts 里有对应的示例数据日历范围为2010-01-10至2010-01-20、maxRange: 3先点 2010-01-13 再点 2010-01-19最终select事件给出的区间是[2010-01-13, 2010-01-15]而不是 19 号。over-range事件触发一次。测试用例should emit overRange when exceeded max range断言超限操作后onOverRange被调用 1 次。提示可被关掉。同一测试文件中show-range-prompt为false的用例断言超限时页面上不存在.van-toast节点说明关闭后提示不再出现。确认按钮上的文字也可以按文档中的「自定义按钮文字」一节调整van-calendar v-model:showshow typerange confirm-text完成 confirm-disabled-text请选择结束时间 /边界与常见坑iOS 上日期不渲染文档 FAQ 指出在 iOS 上不要使用new Date(2020-01-01)这种中划线格式创建日期应写成new Date(2020/01/01)或更稳妥地用new Date(2020, 0, 1)月份从 0 开始。default-date 的取值type为range时default-date要传数组传入null表示默认不选择日期。整体范围与 max-range 的区别min-date/max-date限定的是日历可选的整体区间max-range限定的是单次选择区间内最多能跨多少天两者同时生效。更多属性如poppable平铺展示、formatter自定义日期文案、switch-mode年月切换以及实例方法reset、scrollToDate、getSelectedDate可以在 Calendar 文档 的 API 部分继续查看。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考