如何实现SQLite数据库的用户输入日期范围查询功能

嘿，看来你已经搞定了核心的SQL查询逻辑，就差把用户输入和查询结果联动起来了！我来给你一步步拆解实现方法，很简单的～

第一步：搭建用户输入的HTML界面 #

首先需要给用户提供输入日期的地方，还有展示结果的容器。你可以直接把这段代码加到你的模板里：

<!-- 日期输入区域 -->
<div class="date-controls">
  <label for="start-date">开始日期:</label>
  <input type="date" id="start-date" required>
  
  <label for="end-date">结束日期:</label>
  <input type="date" id="end-date" required>
  
  <button id="run-query">查询记录</button>
</div>

<!-- 结果展示容器 -->
<div id="records-result"></div>

第二步：编写JavaScript交互逻辑 #

接下来要把用户输入的日期传递给你的SQL查询，然后把结果渲染到页面上。这里要注意用参数化查询（别直接拼字符串！），既安全又能避免格式问题。

假设你已经有打开SQLite数据库的逻辑（比如用sqlite-wasm或者IndexedDB封装的库），直接把这段JS代码整合进去：

// 获取页面元素
const startInput = document.getElementById('start-date');
const endInput = document.getElementById('end-date');
const queryBtn = document.getElementById('run-query');
const resultContainer = document.getElementById('records-result');

// 绑定查询按钮的点击事件
queryBtn.addEventListener('click', async () => {
  const startDate = startInput.value;
  const endDate = endInput.value;

  // 先做输入验证
  if (!startDate || !endDate) {
    resultContainer.innerHTML = '<p>请填写完整的日期范围哦！</p>';
    return;
  }
  if (new Date(startDate) > new Date(endDate)) {
    resultContainer.innerHTML = '<p>开始日期不能晚于结束日期呀！</p>';
    return;
  }

  try {
    // 替换成你自己的数据库连接逻辑
    const db = await openYourDatabase(); 
    // 执行参数化查询，用?作为占位符，避免SQL注入
    const records = await db.all(`
      SELECT * FROM 你的表名 
      WHERE 日期列名 BETWEEN ? AND ?
    `, [startDate, endDate]);

    // 把结果渲染到页面上
    displayResults(records);
  } catch (err) {
    resultContainer.innerHTML = `<p>查询出错了：${err.message}</p>`;
    console.error('查询错误:', err);
  }
});

// 可选：实现自动查询——用户选完两个日期就自动触发
startInput.addEventListener('change', () => {
  if (endInput.value) queryBtn.click();
});
endInput.addEventListener('change', () => {
  if (startInput.value) queryBtn.click();
});

// 结果渲染函数，把查询到的记录转成表格
function displayResults(records) {
  if (records.length === 0) {
    resultContainer.innerHTML = '<p>这个日期范围内没有找到任何记录哦～</p>';
    return;
  }

  // 生成表格
  let tableHtml = '<table border="1"><thead><tr>';
  // 取第一条记录的键作为表头
  const columnNames = Object.keys(records[0]);
  columnNames.forEach(name => {
    tableHtml += `<th>${name}</th>`;
  });
  tableHtml += '</tr></thead><tbody>';

  // 填充每行数据
  records.forEach(record => {
    tableHtml += '<tr>';
    columnNames.forEach(name => {
      tableHtml += `<td>${record[name]}</td>`;
    });
    tableHtml += '</tr>';
  });

  tableHtml += '</tbody></table>';
  resultContainer.innerHTML = tableHtml;
}

几个关键注意点 #

• 参数化查询是必须的：用?占位符传递日期，绝对不要直接把用户输入拼进SQL字符串里，不然会有SQL注入风险，还可能因为日期格式报错。
• 日期格式不用愁：HTML的input type="date"返回的正好是SQLite支持的YYYY-MM-DD格式，完美匹配，不需要额外转换。
• 用户体验要做好：加个输入验证，提示用户填对日期范围，避免无效查询；自动查询的功能能让用户操作更顺畅。

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