价格日历 js

价格日历（Price Calendar）通常是一个网页组件或应用功能，用于展示商品或服务的价格随时间的变化。这种日历可以帮助消费者了解在不同日期购买商品或服务的成本，特别是在价格波动较大的情况下，如旅游、航空票务、酒店预订等领域。

基础概念

价格日历的核心是展示价格与日期的对应关系。它通常包括以下几个部分：

日期网格：显示连续的日期，用户可以清晰地看到每一天的价格。
价格显示：每个日期旁边会标注当天的价格。
交互功能：用户可以选择特定日期查看详细信息，或者选择日期范围进行预订。

类型

价格日历可以根据不同的业务需求有不同的展现形式：

静态日历：价格固定，不随时间变化。
动态日历：价格会根据库存、需求等因素实时变动。

应用场景

旅游预订：酒店、航班、租车服务等。
电商：季节性商品、限量版产品的销售。
服务行业：如美容、健身房会员服务等。

技术实现

价格日历可以使用JavaScript库（如jQuery UI Datepicker、Flatpickr等）来实现，也可以使用现代前端框架（如React、Vue等）自定义开发。

以下是一个使用JavaScript和HTML创建简单价格日历的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Price Calendar</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
  .price-calendar {
    width: 300px;
    margin: auto;
  }
  .price-calendar td {
    text-align: center;
    padding: 5px;
  }
</style>
</head>
<body>

<div class="price-calendar">
  <table>
    <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
    </thead>
    <tbody id="calendar-body">
      <!-- Calendar days will be generated here -->
    </tbody>
  </table>
</div>

<script>
// Mock data for prices
const prices = {
  '2023-04-01': 100,
  '2023-04-02': 150,
  // ... more prices
};

function generateCalendar(year, month) {
  const calendarBody = document.getElementById('calendar-body');
  calendarBody.innerHTML = ''; // Clear previous calendar

  const firstDayOfMonth = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const startingDay = firstDayOfMonth.getDay();

  let date = 1;
  for (let i = 0; i < 6; i++) { // Max 6 weeks
    const weekRow = document.createElement('tr');
    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < startingDay) {
        const emptyCell = document.createElement('td');
        weekRow.appendChild(emptyCell);
      } else if (date > daysInMonth) {
        break;
      } else {
        const dayCell = document.createElement('td');
        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
        const price = prices[dateStr] || 'N/A';
        dayCell.textContent = `${date} - $${price}`;
        weekRow.appendChild(dayCell);
        date++;
      }
    }
    calendarBody.appendChild(weekRow);
    if (date > daysInMonth) break;
  }
}

// Initialize calendar for April 2023
generateCalendar(2023, 3); // Months are 0-indexed in JavaScript
</script>

</body>
</html>