前端UI库/组件【免费下载链接】jquery-date-range-pickerA jQuery plugin that allows user to select a date range项目地址https://gitcode.com/gh_mirrors/jq/jquery-date-range-picker点击查看免费下载jQuery Date Range Picker 是一个轻量好用的 jQuery 日期范围选择插件专为酒店预订、机票筛选等场景设计。本文将带你用 3 步完成入住/退房日期选择器搭建并通过 beforeShowDay 回调把已售罄日期一键禁用。一、jQuery Date Range Picker 是什么jQuery Date Range Picker当前版本 0.21.1是一个完全由 CSS 定制样式的日期范围选择器插件开箱即用的核心能力包括能力说明 双月日历左右两月并排展示选中区间自动高亮 多语言支持内置简体中文、英文等 20 语言包 区间约束通过 minDays / maxDays 限制最短/最长入住天数 日期禁用beforeShowDay 回调可禁用任意日期并显示提示⚡ 零依赖框架仅依赖 jQuery 1.7 与 Moment 2.8.1核心逻辑全部集中在 src/jquery.daterangepicker.js样式位于 src/daterangepicker.scss。二、30 秒上手引入依赖与初始化只需引入三个文件jQuery、Moment 和插件本体然后对任意input调用dateRangePicker()即可$(#checkin).dateRangePicker();就这么简单——不传任何参数时插件会以今天为起点、默认格式渲染一个双月日历。官方演示页 index.html 中列出了 50 多个可复制的配置示例。三、酒店预订实战锁定今天往后可选酒店场景有三个硬性要求入住日期不能早于今天、必须先选入住再选退房、入住天数有上下限。jQuery Date Range Picker 用 4 个参数即可全部满足$(#hotel-booking).dateRangePicker({ startDate: new Date(), // 可选范围从今天开始 selectForward: true, // 只能向后选择 minDays: 1, // 最短住 1 晚 maxDays: 30 // 最长住 30 晚 });startDate之后的日期才会渲染为可选状态实现见 src/jquery.daterangepicker.js#L1649selectForward: true会让第二个月的日历自动跟随所选日期避免用户往前翻超出maxDays的范围会被拦截并在顶部显示所选日期范围不能大于 30 天的中文提示CHANGELOG 中的多语言包均内置该文案。四、核心技巧用 beforeShowDay 禁用已售罄日期这是酒店场景最关键的配置。beforeShowDay会在日历渲染每一天之前被调用一次接收一个 Date 对象返回一个三元素数组beforeShowDay: function(t) { var soldOut soldDates.includes(t.toDateString()); return [!soldOut, , soldOut ? 已售罄 : ]; }返回值含义[0]true/false该日期是否可选[1]附加到日期格子的 CSS 类名可用于标红等自定义样式[2]鼠标悬停时显示的 tooltip 提示文本官方示例把周末无房作为演示demo.js#L459-L470$(#hotel-booking).dateRangePicker({ startDate: new Date(), selectForward: true, beforeShowDay: function(t) { var valid !(t.getDay() 0 || t.getDay() 6); var _tooltip valid ? : sold out; return [valid, , _tooltip]; } });实际项目中只需把valid的判断换成查询后端无房日期列表即可禁用逻辑完全不变。 进阶配合showDateFilter还能在每天格子里显示当日房价让日历直接变成日历价表示例见 demo.js#L403-L412。五、两个让体验更好的可选配置1. 选中后自动关闭移动端用户最怕选完不关加一个autoClose: true即可{ autoClose: true }2. 监听选择完成事件用户选定日期范围后datepicker-change事件会带上date1、date2两个 Date 对象正是调用后端查询空房/价格的时机.on(datepicker-change, function(event, obj) { console.log(obj.date1, obj.date2); // 发送请求查房 });事件清单与 demo.js#L52-L98 一致datepicker-first-date-selected、datepicker-change、datepicker-apply、datepicker-close等。六、常见配置速查表参数类型酒店场景用途startDateDate/String限制最早入住日期endDateDate/String限制最晚可入住日期selectForwardBoolean强制先选入住、再选退房minDays/maxDaysNumber最短/最长入住晚数beforeShowDayFunction禁用售罄日期 tooltipautoCloseBoolean选完自动收起面板singleDateBoolean只选单一天如离店日期inline/alwaysOpenBoolean内嵌在页面侧边栏常显languageString传cn启用简体中文界面七、项目文件导航想深入阅读源码或扩展功能可以从以下文件入手插件核心逻辑src/jquery.daterangepicker.js完整配置演示含酒店示例demo.js演示页面 配置文档说明index.html样式定制入口src/daterangepicker.scss依赖与版本信息package.json总结jQuery Date Range Picker 用不到 20 行配置就能覆盖酒店预订的完整需求startDateselectForward锁定可选范围minDays/maxDays约束入住晚数beforeShowDay精准禁用售罄日期并给出已售罄提示。对于还在用 jQuery 的存量项目它无疑是实现日期范围选择的最低成本方案。赞分享前端UI库/组件【免费下载链接】jquery-date-range-pickerA jQuery plugin that allows user to select a date range项目地址https://gitcode.com/gh_mirrors/jq/jquery-date-range-picker点击查看免费下载相关推荐HarmonyOS 仓颉应用实战Grid Stack 实现酒店预订日期范围选择HarmonyOS 仓颉应用实战Grid Stack 实现酒店预订日期范围选择 本指南围绕 HarmonyOS Examples 仓库中的 14 Date示例工程【亲测免费】 推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker 在Web开发中日期和时间的选择是一个常见的需求而良好的用户体前端UI库/组件10个excalidraw-animate高级技巧掌握动画顺序与持续时间的完美控制10个excalidraw animate高级技巧掌握动画顺序与持续时间的完美控制 excalidraw animate是一款专为Excalidraw绘图添加前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考