如何实现点击输入框后在其下方显示FullCalendar 6（仿jQuery UI DatePicker）

要实现点击输入框后在其下方显示FullCalendar，核心是控制日历容器的显示/隐藏、精准定位，结合FullCalendar的日期选择事件完成输入框回填，以下是具体实现步骤：

1. 基础HTML结构与样式 #

先搭建输入框和日历容器的基础结构，日历容器默认隐藏，通过绝对定位实现悬浮效果：

<input type="text" id="dateInput" placeholder="点击选择日期">
<div id="calendarContainer" style="display: none; position: absolute; z-index: 1000; background: white; border: 1px solid #ddd; padding: 10px;"></div>

2. 初始化FullCalendar与交互逻辑 #

初始化日历，开启日期选择功能，同时绑定输入框的点击、外部区域点击关闭等交互：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendarContainer');
  const dateInput = document.getElementById('dateInput');

  // 初始化FullCalendar
  const calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    // 选中日期后回填输入框并隐藏日历
    select: function(info) {
      // 格式化日期为YYYY-MM-DD，可按需调整格式
      const selectedDate = info.startStr.split('T')[0];
      dateInput.value = selectedDate;
      calendarEl.style.display = 'none';
    }
  });

  calendar.render();

  // 输入框点击：显示日历并定位到输入框下方
  dateInput.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止冒泡，避免触发外部关闭逻辑
    calendarEl.style.display = 'block';
    // 获取输入框位置，计算日历容器的定位坐标
    const inputRect = dateInput.getBoundingClientRect();
    calendarEl.style.top = `${inputRect.bottom + window.scrollY}px`;
    calendarEl.style.left = `${inputRect.left + window.scrollX}px`;
  });

  // 点击页面其他区域关闭日历
  document.addEventListener('click', function(e) {
    const isInputClicked = dateInput.contains(e.target);
    const isCalendarClicked = calendarEl.contains(e.target);
    if (!isInputClicked && !isCalendarClicked) {
      calendarEl.style.display = 'none';
    }
  });
});

3. 视觉优化（可选） #

如果需要让日历更贴合DatePicker的视觉风格，可添加以下CSS：

#calendarContainer {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-radius: 4px;
}
#dateInput {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

关键细节说明 #

• 用getBoundingClientRect()获取输入框的实时位置，结合window.scrollY/X处理页面滚动时的定位偏移
• 通过stopPropagation()避免输入框的点击事件触发外部区域的关闭逻辑
• 利用FullCalendar原生的select事件捕获选中日期，无需额外处理日期解析

内容的提问来源于stack exchange，提问作者frank