javascript实现日历并且点击日期出现弹出框可以设置价格和房间数量并显示

好的，可以使用JavaScript和HTML/CSS来实现一个简单的日历，并且在点击日期时弹出一个对话框，让用户设置价格和房间数量。以下是一个示例代码：

HTML代码:

<div id="calendar"></div>

<div id="dialog" style="display:none;">
  <h3 id="date"></h3>
  <form>
    <label>价格:</label>
    <input type="number" id="price" required><br>
    <label>房间数量:</label>
    <input type="number" id="rooms" required><br>
    <button type="submit" id="submit-btn">提交</button>
  </form>
</div>

CSS代码:

#calendar {
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  margin: 0 auto;
}

#calendar table {
  width: 100%;
}

#calendar th,
#calendar td {
  text-align: center;
  padding: 5px;
}

#calendar th {
  background-color: #eee;
}

#calendar td:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

#dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#dialog label {
  display: block;
  margin-bottom: 5px;
}

#dialog input {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

#dialog button {
  display: block;
  margin: 10px auto;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

JavaScript代码:

// 获取日历容器元素
const calendarEl = document.getElementById('calendar');

// 获取对话框元素和日期元素
const dialogEl = document.getElementById('dialog');
const dateEl = document.getElementById('date');

// 获取价格和房间数量输入框及提交按钮元素
const priceEl = document.getElementById('price');
const roomsEl = document.getElementById('rooms');
const submitBtn = document.getElementById('submit-btn');

// 定义当前日期和月份
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();

// 定义当前选中的日期和价格、房间数量
let selectedDate;
let selectedPrice;
let selectedRooms;

// 定义月份名称和每个月的天数
const months = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
];

const monthDays = [
  31, // 1月
  28, // 2月
  31, // 3月
  30, // 4月
  31, // 5月
  30, // 6月
  31, // 7月
  31, // 8月
  30, // 9月
  31, // 10月
  30, // 11月
  31 // 12月
];

// 判断是否为闰年
function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

// 获取某个月的天数
function getMonthDays(year, month) {
  if (month === 1 && isLeapYear(year)) {
    return 29;
  } else {
    return monthDays[month];
  }
}

// 获取某个月的第一天是星期几
function getFirstDayOfMonth(year, month) {
  return new Date(year, month, 1).getDay();
}

// 获取某个日期的字符串表示
function formatDate(date) {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}

// 渲染日历
function renderCalendar() {
  // 创建表格元素和表头元素
  const tableEl = document.createElement('table');
  const theadEl = document.createElement('thead');

  // 创建表头的年份和月份
  const yearMonthEl = document.createElement('th');
  yearMonthEl.colSpan = 7;
  yearMonthEl.innerHTML = `${months[currentMonth]} ${currentYear}`;

  // 创建表头的星期几
  const weekdaysEl = document.createElement('tr');
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  weekdays.forEach((weekday) => {
    const thEl = document.createElement('th');
    thEl.innerHTML = weekday;
    weekdaysEl.appendChild(thEl);
  });

  // 将表头元素添加到表格中
  theadEl.appendChild(yearMonthEl);
  theadEl.appendChild(weekdaysEl);
  tableEl.appendChild(theadEl);

  // 计算当前月份的天数和第一天是星期几
  const monthDays = getMonthDays(currentYear, currentMonth);
  const firstDay = getFirstDayOfMonth(currentYear, currentMonth);

  // 创建表格的日期部分
  let date = 1;
  for (let i = 0; i < 6; i++) {
    const trEl = document.createElement('tr');
    for (let j = 0; j < 7; j++) {
      const tdEl = document.createElement('td');
      if (i === 0 && j < firstDay) {
        // 不属于本月的日期
        tdEl.innerHTML = '';
        tdEl.classList.add('disabled');
      } else if (date > monthDays) {
        // 超过本月的日期
        tdEl.innerHTML = '';
        tdEl.classList.add('disabled');
      } else {
        // 属于本月的日期
        tdEl.innerHTML = date;
        tdEl.classList.add('date');
        if (date === currentDate.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear()) {
          tdEl.classList.add('today');
        }
        date++;
      }
      trEl.appendChild(tdEl);
    }
    tableEl.appendChild(trEl);
  }

  // 将表格元素添加到日历容器中
  calendarEl.innerHTML = '';
  calendarEl.appendChild(tableEl);

  // 绑定日期单元格的点击事件
  const dateEls = document.querySelectorAll('.date');
  dateEls.forEach((dateEl) => {
    dateEl.addEventListener('click', () => {
      selectedDate = new Date(currentYear, currentMonth, dateEl.innerHTML);
      dateEl.classList.add('selected');
      dialogEl.style.display = 'block';
      dateEl.innerHTML += `<br><small>¥${selectedPrice} / ${selectedRooms}间</small>`;
      dateEl.style.position = 'relative';
      dateEl.style.zIndex = 1;
      dateEl.style.backgroundColor = '#007bff';
      dateEl.style.color = '#fff';
      dateEl.style.borderRadius = '50%';
      dateEl.style.padding = '10px';
      dateEl.style.boxSizing = 'border-box';
      dateEl.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
      priceEl.focus();
    });
  });

  // 绑定对话框的提交事件
  submitBtn.addEventListener('click', (event) => {
    event.preventDefault();
    selectedPrice = priceEl.value;
    selectedRooms = roomsEl.value;
    dateEl.innerHTML = `${selectedDate.getMonth() + 1}月${selectedDate.getDate()}日`;
    dialogEl.style.display = 'none';
  });
}

// 渲染初始日历
renderCalendar();

// 绑定前一月和后一月按钮的点击事件
document.getElementById('prev-btn').addEventListener('click', () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
});

document.getElementById('next-btn').addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
});

以上代码实现了一个简单的日历，并且在点击日期时弹出对话框，让用户设置价格和房间数量。在设置完价格和房间数量后，对话框会自动关闭，并且在选中的日期下方显示设置的价格和房间数量。用户也可以通过左右箭头切换月份。你可以根据自己的需求进一步优化代码。