基于HTML/JavaScript构建交互式酒店日期选择器：完整实现方案与源码解析

2026年3月7日 互联网

一、组件功能需求分析

在酒店预订场景中，日期选择器需要满足以下核心需求：

  1. 日期范围约束：退房日期必须晚于入住日期，默认限制最大预订天数（如30天）
  2. 动态价格计算：根据入住天数和基础房价自动计算总价
  3. 交互状态可视化：
    • 当前选中日期高亮显示
    • 连续日期范围特殊标记
    • 不可选日期（如过去日期、已满房日期）置灰处理
  4. 响应式适配：适配桌面端和移动端不同屏幕尺寸

二、组件架构设计

1. 整体结构

采用模块化设计思想，将组件拆分为三个核心模块：

  1. <div class="booking-container">
  2.   <!-- 日期输入区 -->
  3.   <div class="date-inputs">
  4.     <!-- 包含两个只读输入框 -->
  5.   </div>
  7.   <!-- 日历面板 -->
  8.   <div class="calendar-panel">
  9.     <!-- 包含月份导航和日期网格 -->
  10.   </div>
  12.   <!-- 预订摘要 -->
  13.   <div class="booking-summary">
  14.     <!-- 显示价格计算结果 -->
  15.   </div>
  16. </div>

2. 数据模型设计

  1. const bookingModel = {
  2.   checkInDate: null,      // 入住日期
  3.   checkOutDate: null,     // 退房日期
  4.   basePrice: 388,         // 基础房价
  5.   maxStayDays: 30,        // 最大入住天数
  6.   disabledDates: [],       // 不可选日期数组
  8.   // 计算方法
  9.   getStayDays() {
  10.     if (!this.checkInDate || !this.checkOutDate) return 0
  11.     return Math.ceil((this.checkOutDate - this.checkInDate) / (1000*60*60*24))
  12.   },
  14.   getTotalPrice() {
  15.     return this.getStayDays() * this.basePrice
  16.   }
  17. }

三、核心功能实现

1. 日历渲染引擎

  1. function renderCalendar(year, month) {
  2.   const calendarGrid = document.getElementById('calendarGrid')
  3.   const firstDay = new Date(year, month, 1)
  4.   const daysInMonth = new Date(year, month + 1, 0).getDate()
  5.   const startingDay = firstDay.getDay()
  7.   // 生成日期单元格
  8.   let html = ''
  9.   for (let i = 0; i < startingDay; i++) {
  10.     html += '<div></div>' // 上个月日期占位
  11.   }
  13.   for (let day = 1; day <= daysInMonth; day++) {
  14.     const currentDate = new Date(year, month, day)
  15.     const isToday = isSameDay(currentDate, new Date())
  16.     const isDisabled = isDateDisabled(currentDate)
  18.     html += `
  19.       <div class="day ${getClassNames(currentDate)}" 
  20.            data-date="${currentDate.toISOString()}">
  21.         ${day}
  22.         ${isToday ? '<span></span>' : ''}
  23.       </div>
  24.     `
  25.   }
  27.   calendarGrid.innerHTML = html
  28. }
  30. // 辅助函数：获取日期单元格的CSS类
  31. function getClassNames(date) {
  32.   const classes = []
  33.   if (isSameDay(date, bookingModel.checkInDate)) classes.push('start-date')
  34.   if (isSameDay(date, bookingModel.checkOutDate)) classes.push('end-date')
  35.   if (isDateInRange(date)) classes.push('in-range')
  36.   if (bookingModel.disabledDates.includes(date.toISOString())) classes.push('disabled')
  37.   return classes.join(' ')
  38. }

2. 日期选择逻辑

  1. let isSelectingRange = false
  2. let tempCheckOutDate = null
  4. document.querySelectorAll('.day:not(.disabled)').forEach(day => {
  5.   day.addEventListener('click', function() {
  6.     const selectedDate = new Date(this.dataset.date)
  8.     if (!bookingModel.checkInDate) {
  9.       // 首次选择入住日期
  10.       bookingModel.checkInDate = selectedDate
  11.       tempCheckOutDate = new Date(selectedDate)
  12.       tempCheckOutDate.setDate(selectedDate.getDate() + 1)
  13.       isSelectingRange = true
  14.     } else if (isSelectingRange) {
  15.       // 选择退房日期
  16.       if (selectedDate < bookingModel.checkInDate) {
  17.         // 如果点击的日期早于入住日期，重新选择入住日期
  18.         bookingModel.checkInDate = selectedDate
  19.       } else {
  20.         bookingModel.checkOutDate = selectedDate
  21.         isSelectingRange = false
  22.       }
  23.     }
  25.     updateUI()
  26.   })
  27. })
  29. // 鼠标移动时高亮范围（桌面端优化）
  30. document.querySelector('.calendar-grid').addEventListener('mouseover', (e) => {
  31.   if (!isSelectingRange || !bookingModel.checkInDate) return
  33.   const day = e.target.closest('.day:not(.disabled)')
  34.   if (!day) return
  36.   tempCheckOutDate = new Date(day.dataset.date)
  37.   updateUI()
  38. })

3. 交互状态管理

  1. function updateUI() {
  2.   // 更新输入框显示
  3.   document.getElementById('checkin').value = 
  4.     bookingModel.checkInDate ? formatDate(bookingModel.checkInDate) : ''
  5.   document.getElementById('checkout').value = 
  6.     bookingModel.checkOutDate ? formatDate(bookingModel.checkOutDate) : ''
  8.   // 更新预订摘要
  9.   document.getElementById('summaryNights').textContent = 
  10.     bookingModel.getStayDays() || 0
  11.   document.getElementById('summaryTotal').textContent = 
  12.     bookingModel.getTotalPrice() || 0
  14.   // 重新渲染日历
  15.   const currentMonth = document.getElementById('currentMonth')
  16.   const [year, month] = currentMonth.dataset.ym.split('-').map(Number)
  17.   renderCalendar(year, month)
  18. }
  20. // 日期格式化工具函数
  21. function formatDate(date) {
  22.   return date.toISOString().split('T')[0].replace(/-/g, '/')
  23. }

四、样式设计与交互优化

1. 核心样式实现

  1. .calendar-grid {
  2.   display: grid;
  3.   grid-template-columns: repeat(7, 1fr);
  4.   gap: 8px;
  5.   padding: 16px;
  6. }
  8. .day {
  9.   aspect-ratio: 1;
  10.   display: flex;
  11.   align-items: center;
  12.   justify-content: center;
  13.   border-radius: 8px;
  14.   position: relative;
  15.   font-size: 14px;
  16.   transition: all 0.2s ease;
  17. }
  19. /* 交互状态样式 */
  20. .day:hover:not(.disabled):not(.selected) {
  21.   background-color: #f5f5f5;
  22.   transform: scale(1.05);
  23. }
  25. .day.selected {
  26.   background-color: #4285f4;
  27.   color: white;
  28.   font-weight: bold;
  29. }
  31. .day.in-range {
  32.   background-color: #e8f0fe;
  33. }
  35. .today-marker {
  36.   position: absolute;
  37.   bottom: 2px;
  38.   width: 4px;
  39.   height: 4px;
  40.   border-radius: 50%;
  41.   background-color: #ff5722;
  42. }

2. 移动端适配优化

  1. @media (max-width: 768px) {
  2.   .booking-container {
  3.     flex-direction: column;
  4.     padding: 12px;
  5.   }
  7.   .calendar-panel {
  8.     position: fixed;
  9.     top: 50%;
  10.     left: 50%;
  11.     transform: translate(-50%, -50%);
  12.     width: 90%;
  13.     max-width: 400px;
  14.     box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  15.   }
  17.   .day {
  18.     font-size: 12px;
  19.   }
  20. }

五、完整实现代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>酒店日期选择器</title>
  7.   <style>
  8.     /* 完整CSS样式见上文代码块 */
  9.   </style>
  10. </head>
  11. <body>
  12.   <div class="booking-container">
  13.     <div class="date-inputs">
  14.       <div class="input-group">
  15.         <label for="checkin">入住日期</label>
  16.         <input type="text" id="checkin" readonly placeholder="选择入住日期">
  17.       </div>
  18.       <div class="input-group">
  19.         <label for="checkout">退房日期</label>
  20.         <input type="text" id="checkout" readonly placeholder="选择退房日期">
  21.       </div>
  22.     </div>
  24.     <div class="calendar-panel">
  25.       <div class="calendar-header">
  26.         <button class="nav-button" onclick="changeMonth(-1)">‹</button>
  27.         <h2 id="currentMonth"></h2>
  28.         <button class="nav-button" onclick="changeMonth(1)">›</button>
  29.       </div>
  30.       <div class="calendar-grid" id="calendarGrid"></div>
  31.     </div>
  33.     <div class="booking-summary">
  34.       <h3>预订详情</h3>
  35.       <div class="summary-item">
  36.         <span>入住日期:</span>
  37.         <span id="summaryCheckin">-</span>
  38.       </div>
  39.       <div class="summary-item">
  40.         <span>退房日期:</span>
  41.         <span id="summaryCheckout">-</span>
  42.       </div>
  43.       <div class="summary-item">
  44.         <span>入住天数:</span>
  45.         <span id="summaryNights">0</span>
  46.       </div>
  47.       <div class="summary-item">
  48.         <span>房间单价:</span>
  49.         <span>¥<span id="summaryPrice">388</span></span>
  50.       </div>
  51.       <div class="summary-item total">
  52.         <span>总价:</span>
  53.         <span>¥<span id="summaryTotal">0</span></span>
  54.       </div>
  55.     </div>
  56.   </div>
  58.   <script>
  59.     // 完整JavaScript实现见上文代码块
  60.     // 包含bookingModel定义、renderCalendar、事件处理等函数
  62.     // 初始化组件
  63.     document.addEventListener('DOMContentLoaded', () => {
  64.       const today = new Date()
  65.       const currentMonth = today.getMonth()
  66.       const currentYear = today.getFullYear()
  68.       document.getElementById('currentMonth').textContent = 
  69.         `${currentYear}年${currentMonth + 1}月`
  70.       document.getElementById('currentMonth').dataset.ym = `${currentYear}-${currentMonth}`
  72.       renderCalendar(currentYear, currentMonth)
  74.       // 初始化输入框点击事件
  75.       document.getElementById('checkin').addEventListener('click', () => {
  76.         // 实际项目中这里应该显示日历面板
  77.         console.log('点击了入住日期输入框')
  78.       })
  79.     })
  80.   </script>
  81. </body>
  82. </html>

六、扩展功能建议

  1. 多房间选择：添加房间数量选择器，动态计算总价
  2. 价格日历：根据日期显示不同价格（周末/节假日溢价）
  3. 数据持久化：使用localStorage保存用户选择
  4. 国际化支持：添加多语言和日期格式支持
  5. 服务端集成：通过API获取不可订日期和动态价格

本文实现的日期选择器组件具有以下优势：

  • 纯原生实现，无需依赖第三方库
  • 完整的日期范围选择逻辑
  • 丰富的交互状态反馈
  • 响应式设计适配多设备
  • 模块化架构便于扩展

开发者可根据实际项目需求在此基础上进行功能扩展和样式定制，建议将核心逻辑封装为可复用的组件，便于在不同项目中集成使用。

最新文章