怎么在日历下面加时间选择器代码

以下是一个简单的实现方式，使用 HTML、CSS 和 JavaScript 创建一个日历和时间选择器的基本布局，并在用户选择日期或时间时更新时间选择器。

HTML 代码：

<div class="datetime-picker">
  <div class="calendar">
    <!-- 日历布局 -->
  </div>
  <div class="time-picker">
    <label for="time">选择时间：</label>
    <input type="time" id="time">
  </div>
</div>

CSS 代码：

.datetime-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.calendar {
  /* 日历布局样式 */
}

.time-picker {
  margin-left: 20px;
}

.time-picker label {
  font-weight: bold;
}

JavaScript 代码：

const timePicker = document.getElementById('time');

timePicker.addEventListener('change', (event) => {
  const selectedTime = event.target.value;
  console.log(`Selected time: ${selectedTime}`);
});

这段代码创建了一个包含日历和时间选择器的容器元素，时间选择器使用了 HTML5 中的 `<input type="time">` 元素。通过添加事件监听器，可以在用户选择时间时更新时间选择器，并将所选时间保存在变量中。