如何用jQuery实现单字段起止时间选择器及弹窗式时间选择器

一、单字段起止时间选择器 #

这种选择器将起止时间合并到单个输入框中，直观简洁，适合空间有限的场景：

• 核心思路：

  • 使用只读输入框展示合并后的时间范围，避免用户手动输入格式错误
  • 绑定点击事件触发时间选择逻辑，可结合原生时间控件或自定义选择面板
  • 通过正则或日期对象校验时间范围的有效性

• 示例代码：

<div class="single-time-input">
  <input type="text" id="timeRangeInput" placeholder="点击选择起止时间" readonly>
</div>

<script>
  const timeInput = document.getElementById('timeRangeInput');
  
  timeInput.addEventListener('click', async () => {
    // 模拟调用时间选择逻辑，实际可替换为UI选择面板
    const startTime = prompt('请输入开始时间（格式：YYYY-MM-DD HH:mm）');
    const endTime = prompt('请输入结束时间（格式：YYYY-MM-DD HH:mm）');
    
    if (startTime && endTime) {
      // 校验时间顺序
      if (new Date(endTime) >= new Date(startTime)) {
        timeInput.value = `${startTime} - ${endTime}`;
      } else {
        alert('结束时间不能早于开始时间');
      }
    }
  });
</script>

<style>
  .single-time-input input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    width: 280px;
  }
  .single-time-input input:hover {
    border-color: #666;
  }
</style>

二、弹窗样式的起止时间选择器 #

这种模式通过按钮触发弹窗，弹窗内独立展示开始/结束时间选择控件，操作更清晰：

• 核心思路：

  • 用固定定位实现全屏遮罩弹窗，内部包含两个时间选择器和操作按钮
  • 实现弹窗的显示/隐藏逻辑，添加时间范围校验，支持点击遮罩或取消按钮关闭弹窗

• 示例代码：

<button id="openTimePicker">选择时间范围</button>

<!-- 弹窗容器 -->
<div class="time-picker-modal" id="pickerModal">
  <div class="modal-overlay" id="overlay"></div>
  <div class="modal-box">
    <h4>选择起止时间</h4>
    <div class="picker-group">
      <label>开始时间：</label>
      <input type="datetime-local" id="startPicker">
    </div>
    <div class="picker-group">
      <label>结束时间：</label>
      <input type="datetime-local" id="endPicker">
    </div>
    <div class="modal-actions">
      <button id="cancelBtn">取消</button>
      <button id="confirmBtn">确认</button>
    </div>
  </div>
</div>

<script>
  const openBtn = document.getElementById('openTimePicker');
  const modal = document.getElementById('pickerModal');
  const overlay = document.getElementById('overlay');
  const cancelBtn = document.getElementById('cancelBtn');
  const confirmBtn = document.getElementById('confirmBtn');
  const startPicker = document.getElementById('startPicker');
  const endPicker = document.getElementById('endPicker');

  // 打开弹窗
  openBtn.addEventListener('click', () => {
    modal.style.display = 'block';
  });

  // 关闭弹窗
  const closeModal = () => {
    modal.style.display = 'none';
  };
  cancelBtn.addEventListener('click', closeModal);
  overlay.addEventListener('click', closeModal);

  // 确认选择
  confirmBtn.addEventListener('click', () => {
    const start = startPicker.value.replace('T', ' ');
    const end = endPicker.value.replace('T', ' ');
    
    if (!start || !end) {
      alert('请完整选择起止时间');
      return;
    }
    if (new Date(end) < new Date(start)) {
      alert('结束时间不能早于开始时间');
      return;
    }
    
    alert(`已选择时间范围：${start} 至 ${end}`);
    closeModal();
  });
</script>

<style>
  .time-picker-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  .modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .modal-box {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 320px;
  }
  .picker-group {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .modal-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #confirmBtn {
    background-color: #2196F3;
    color: #fff;
  }
</style>

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