jQuery Date Range Picker酒店预订实战：日期范围选择与已售罄日期禁用方案

• 前端
• UI库/组件

jQuery Date Range Picker 是一个轻量好用的 jQuery 日期范围选择插件，专为酒店预订、机票筛选等场景设计。本文将带你用 3 步完成入住/退房日期选择器搭建，并通过 beforeShowDay 回调把已售罄日期一键禁用。

一、jQuery Date Range Picker 是什么？

jQuery Date Range Picker（当前版本 0.21.1）是一个完全由 CSS 定制样式的日期范围选择器插件，开箱即用的核心能力包括：

核心逻辑全部集中在 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#L1649）；
• selectForward: true会让第二个月的日历自动跟随所选日期，避免用户往前翻；
• 超出maxDays的范围会被拦截，并在顶部显示"所选日期范围不能大于 30 天"的中文提示（CHANGELOG 中的多语言包均内置该文案）。

四、核心技巧：用 beforeShowDay 禁用已售罄日期

这是酒店场景最关键的配置。beforeShowDay会在日历渲染每一天之前被调用一次，接收一个 Date 对象，返回一个三元素数组：

beforeShowDay: function(t) { var soldOut = soldDates.includes(t.toDateString()); return [!soldOut, '', soldOut ? '已售罄' : '']; }

官方示例把"周末无房"作为演示（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等。

六、常见配置速查表

七、项目文件导航

想深入阅读源码或扩展功能，可以从以下文件入手：

• 插件核心逻辑：src/jquery.daterangepicker.js
• 完整配置演示（含酒店示例）：demo.js
• 演示页面 + 配置文档说明：index.html
• 样式定制入口：src/daterangepicker.scss
• 依赖与版本信息：package.json

总结

jQuery Date Range Picker 用不到 20 行配置就能覆盖酒店预订的完整需求：startDate+selectForward锁定可选范围，minDays/maxDays约束入住晚数，beforeShowDay精准禁用售罄日期并给出"已售罄"提示。对于还在用 jQuery 的存量项目，它无疑是实现日期范围选择的最低成本方案。

• 前端
• UI库/组件