基于HTML/CSS/JS+jQuery，如何用daterangepicker实现单日/日期范围选择？

你可以通过自定义daterangepicker的交互逻辑来实现需求，核心思路是监听日期点击事件，区分单次点击（选择单个日期）和两次点击（选择日期范围），以下是具体实现代码：

HTML结构 #

<input type="text" id="dateRangeInput" placeholder="选择日期或日期范围">

JavaScript实现 #

$(function() {
  let selectedStart = null;
  let autoSelectTimer = null;

  // 初始化daterangepicker
  $('#dateRangeInput').daterangepicker({
    autoApply: false,
    showDropdowns: true,
    locale: {
      cancelLabel: '取消',
      applyLabel: '确认'
    }
  });

  // 监听日历日期点击
  $(document).on('click', '.daterangepicker td.available', function() {
    const clickedDate = moment($(this).data('date'));

    if (!selectedStart) {
      // 首次点击，记录开始日期并启动自动选择计时器
      selectedStart = clickedDate;
      autoSelectTimer = setTimeout(() => {
        const picker = $('#dateRangeInput').data('daterangepicker');
        picker.setStartDate(selectedStart);
        picker.setEndDate(selectedStart);
        picker.hide();
        $('#dateRangeInput').val(selectedStart.format('YYYY-MM-DD'));
        selectedStart = null;
      }, 1800); // 可调整自动确认的延迟时间
    } else {
      // 二次点击，清除计时器并设置日期范围
      clearTimeout(autoSelectTimer);
      let selectedEnd = clickedDate;
      // 确保开始日期不晚于结束日期
      if (selectedEnd.isBefore(selectedStart)) {
        [selectedStart, selectedEnd] = [selectedEnd, selectedStart];
      }
      const picker = $('#dateRangeInput').data('daterangepicker');
      picker.setStartDate(selectedStart);
      picker.setEndDate(selectedEnd);
      picker.hide();
      $('#dateRangeInput').val(`${selectedStart.format('YYYY-MM-DD')} 至 ${selectedEnd.format('YYYY-MM-DD')}`);
      selectedStart = null;
    }
  });

  // 点击取消按钮时重置状态
  $(document).on('click', '.daterangepicker .cancelBtn', function() {
    clearTimeout(autoSelectTimer);
    selectedStart = null;
  });

  // 手动点击确认按钮时的处理逻辑
  $(document).on('click', '.daterangepicker .applyBtn', function() {
    clearTimeout(autoSelectTimer);
    const picker = $('#dateRangeInput').data('daterangepicker');
    if (!picker.endDate) {
      // 仅选择了开始日期，设为单日期
      picker.setEndDate(picker.startDate);
      $('#dateRangeInput').val(picker.startDate.format('YYYY-MM-DD'));
    } else {
      // 范围选择的格式化显示
      $('#dateRangeInput').val(`${picker.startDate.format('YYYY-MM-DD')} 至 ${picker.endDate.format('YYYY-MM-DD')}`);
    }
    selectedStart = null;
  });
});

关键逻辑说明 #

• 首次点击日期时，记录开始日期并启动计时器，若在设定时间内没有二次点击，自动将该日期作为单个日期完成选择。
• 二次点击日期时，立即清除计时器，将两次点击的日期设为范围（自动调整顺序确保开始日期在前）。
• 保留了原组件的取消/确认按钮逻辑，用户也可手动点击确认完成选择。

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