使用 HTML + JavaScript 实现酒店订房日期选择器（附完整代码）

酒店订房日期选择器实现

原创

于 2025-11-05 16:31:26 发布 · 283 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

本项目实现了一个美观实用的酒店订房日期选择器界面，具有完整的日期选择功能和预订计算逻辑。

效果演示

页面结构分析

主要组成部分

整个页面采用居中布局，主要包含三个部分：

日期输入区域 - 两个只读输入框分别用于显示入住和退房日期
日历选择器 - 弹出式日历组件，支持月份切换和日期选择
预订摘要 - 展示预订详细信息和费用计算结果

<div class="container">
  <h1>酒店预订</h1>
  
  <!-- 日期输入区域 -->
  <div class="date-inputs">
    <div class="input-group">
      <label for="checkin">入住日期</label>
      <input type="text" id="checkin" onclick="showCalendar()" placeholder="选择入住日期" readonly>
    </div>
    <div class="input-group">
      <label for="checkout">退房日期</label>
      <input type="text" id="checkout" onclick="showCalendar()" placeholder="选择退房日期" readonly>
    </div>
  </div>
  
  <!-- 日历容器 -->
  <div class="calendar-container" id="calendar">
    <div class="calendar-header">
      <button class="nav-button" onclick="changeMonth(-1)">‹</button>
      <h2 id="currentMonth"></h2>
      <button class="nav-button" onclick="changeMonth(1)">›</button>
    </div>
    <div class="calendar-grid" id="calendarGrid"></div>
  </div>
  
  <!-- 预订摘要 -->
  <div class="booking-summary" id="bookingSummary">
    <h3>预订详情</h3>
    <div class="summary-item">
      <span>入住日期：</span>
      <span id="summaryCheckin"></span>
    </div>
    <div class="summary-item">
      <span>退房日期：</span>
      <span id="summaryCheckout"></span>
    </div>
    <div class="summary-item">
      <span>入住天数：</span>
      <span id="summaryNights"></span>
    </div>
    <div class="summary-item">
      <span>房间单价：</span>
      <span>¥<span id="summaryPrice">388</span></span>
    </div>
    <div class="summary-item total">
      <span>总价：</span>
      <span>¥<span id="summaryTotal">0</span></span>
    </div>
  </div>
</div>

样式设计

日历交互效果

日历中的每个日期格子都实现了丰富的交互反馈：

默认状态：基础数字展示
悬停效果：轻微放大并改变背景色
选中状态：蓝色高亮标识
范围选择：紫色标识起止日期，浅蓝标识中间日期
特殊标记：今日边框、已预订置灰、其他月份淡化

.day {
   
   
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 24px;
    position: relative;
}

.day:hover:not(.disabled):not(.selected) {
   
   
    background: #f0f0f0;
    transform: scale(1.05);
}

.day.selected {
   
   
    background: #667eea;
    color: white;
    font-weight: 600;
}

.day.start-date,
.day.end-date {
   
   
    background: #764ba2;
    color: white;
}

.day.in-range {
   
   
    background: #e0e7ff;
    color: #667eea;
}

核心功能逻辑

初始化数据与配置

定义关键的状态变量：

当前显示的日历月份和年份
已选择的入住和退房日期
最小可选日期（默认为今天）
房间单价
已被预订的日期数组

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

let selectedCheckin = null;
let selectedCheckout = null;

let minDate = new Date();
let pricePerNight = 388;

let bookedDates = [
    '2025-11-15',
    '2025-11-16',
    '2025-11-20',
    '2025-11-21',
    '2025-11-22'
];

日历渲染机制

日历渲染采用标准算法：

清空现有网格内容
添加星期标题栏
计算当前月份的第一天和最后一天
填充上个月末尾的几天（灰色显示）
填充本月所有日期（正常显示）
填充下个月开头的几天（灰色显示）

这样保证了每页日历始终显示完整的6行7列共42个格子。

function updateCalendar() {
   
   
    const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    document.getElementById('currentMonth').textContent = `${
     
     currentYear}年 ${
     
     monthNames[currentMonth]}`;

    const grid = document.getElementById('calendarGrid');
    grid.innerHTML = '';
    
    // 添加星期标题
    const dayHeaders =