如何设置报表日期提示默认当日且支持日历选日期

如果你是用现成报表工具（JasperReport、FineReport、SSRS、BIRT、Metabase等） #

不需要自己开发前端组件，工具本身已经内置了参数提示能力，按以下步骤配置即可：

• 打开报表的参数管理面板，新建一个参数，参数类型选择日期类型（不要选字符串类型，否则无法自动唤起日历控件），给参数命名比如query_date
• 给该参数配置默认值，直接调用工具内置的当前日期函数即可，通用写法为today()或者new Date()，配置后报表运行时会自动填充当前系统日期
• 打开该参数的「运行时提示」开关，将你原有SQL里的?占位符和这个新建的日期参数做绑定：
  • 如果是用JDBC顺序占位符的工具，直接按参数顺序把第一个?绑定到query_date即可，不需要修改SQL语句
  • 如果是用命名参数的工具，把SQL调整为如下写法即可：

    select * from table where date = :query_date
    

• 配置完成后保存，运行报表时就会自动弹出参数提示框，默认填充当前日期，同时自带日历选择控件供用户选日期，不需要额外引入任何第三方提示组件。

如果你是自行代码开发报表页面 #

不需要引入复杂的通用组件，用原生能力就能实现：

• 前端用原生的日期输入标签，本身就自带日历选择控件，不需要额外开发控件逻辑；页面加载时自动获取当前日期格式化后填充到输入框作为默认值
• 用户选完日期点击查询时，把日期值传给后端，后端用预编译SQL的方式把值传入你原有?对应的参数位即可（不要直接拼接SQL，避免注入风险）
• 最简前端实现代码参考：

<!-- 原生日期输入框，自带日历选择能力 -->
<input type="date" id="reportDate">
<button id="queryBtn">运行报表</button>
<script>
// 页面加载完成后自动填充当前日期为默认值
window.addEventListener('load', () => {
  const now = new Date()
  // 格式化为yyyy-MM-dd格式适配日期输入框
  const formatDate = now.toISOString().split('T')[0]
  document.getElementById('reportDate').value = formatDate
})
// 点击查询时传参运行报表
document.getElementById('queryBtn').addEventListener('click', () => {
  const selectedDate = document.getElementById('reportDate').value
  // 此处写接口请求逻辑，将selectedDate传给后端，赋值给SQL里的?占位符即可
})
</script>

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