如何在网页加载时将输入框值设为当日日期并生成动态报告标题

需求实现要点 #

• 页面加载时显示动态标题：LIVE FDP REPORT AS OF {当前日期时间}
• 为只读输入框设置格式化后的当日日期

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>LIVE FDP REPORT</title>
</head>
<body>
    <!-- 动态标题容器 -->
    <h1 id="report-title"></h1>
    <!-- 日期输入框 -->
    <input id="current_date" readonly>

    <script>
        // 获取当前日期时间对象
        const now = new Date();

        // 格式化日期时间用于标题（示例格式：YYYY-MM-DD HH:mm:ss）
        const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        
        // 设置标题内容
        document.getElementById("report-title").textContent = `LIVE FDP REPORT AS OF ${formattedDateTime}`;

        // 格式化当日日期用于输入框（YYYY-MM-DD）
        const formattedDate = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
        
        // 设置输入框值
        document.getElementById("current_date").value = formattedDate;
    </script>
</body>
</html>

关键修正说明 #

1. 修复标签语法错误：

   • 修正了<script>标签的错误写法，确保JS代码能被浏览器正常解析
   • 修正输入框标签的闭合错误，改为标准的<input id="current_date" readonly>写法

2. 优化日期格式：

   • 直接使用Date()返回的字符串可读性差，通过getFullYear()、getMonth()等方法拼接出规范的日期/时间格式
   • 用String().padStart(2, '0')确保月份、日期、时分秒为两位数格式，避免出现“9月”“3日”这类不统一的显示

3. 实现动态标题：

   • 添加<h1 id="report-title"></h1>作为标题容器，通过JS动态插入带当前时间的标题文本

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