Flask页面如何保留用户所选日期，首次加载设默认值？

嘿，我之前做Flask项目时刚好碰到过一模一样的问题！核心矛盾就是要**区分首次访问（无表单提交）和提交后（有用户输入）**的场景，同时保证日期格式始终是HTML日期输入框要求的YYYY-MM-DD。给你两个靠谱的解决方案：

方案一：后端统一处理（推荐） #

这种方式不需要前端JS介入，完全由Flask后端判断并传递正确的日期值，格式不会出错，也不会出现提交后重置的问题。

步骤1：修改Flask视图函数 #

在你的路由函数里，先判断是否有表单提交：如果是POST请求，优先用用户提交的日期；如果是GET请求（首次访问），就设置默认的当月1号和当天：

from datetime import datetime
from flask import Flask, render_template, request

@app.route('/your-page', methods=['GET', 'POST'])
def your_page():
    today = datetime.today()
    # 生成默认日期（YYYY-MM-DD格式，正好匹配HTML date输入框）
    default_start = today.replace(day=1).strftime('%Y-%m-%d')
    default_end = today.strftime('%Y-%m-%d')

    # 优先获取用户提交的日期，没有则用默认值
    start_date = request.form.get('d1', default_start)
    end_date = request.form.get('d3', default_end)

    return render_template('your-template.html', start_date=start_date, end_date=end_date)

步骤2：修改前端模板 #

直接在日期输入框的value属性里渲染后端传递的值即可：

<input type="date" id="d1" name="d1" value="{{ start_date }}">
<input type="date" id="d3" name="d3" value="{{ end_date }}">

这样不管是首次加载还是提交后刷新，输入框都会显示正确的日期，完全不用前端JS来设置默认值。

方案二：前端JS条件设置默认值 #

如果你更倾向于用前端JS处理，那就要只在输入框没有值的时候（首次加载）才设置默认，避免覆盖用户提交后的日期：

修改前端模板和JS #

<!-- 先渲染表单提交的日期（如果有） -->
<input type="date" id="d1" name="d1" {% if request.form.get('d1') %}value="{{ request.form['d1'] }}"{% endif %}>
<input type="date" id="d3" name="d3" {% if request.form.get('d3') %}value="{{ request.form['d3'] }}"{% endif %}>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const d1 = document.getElementById('d1');
    const d3 = document.getElementById('d3');
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');

    // 只有当输入框没有值时，才设置默认的当月1号
    if (!d1.value) {
        d1.value = `${year}-${month}-01`;
    }

    // 只有当输入框没有值时，才设置默认的当天
    if (!d3.value) {
        const day = String(today.getDate()).padStart(2, '0');
        d3.value = `${year}-${month}-${day}`;
    }
});
</script>

这里用padStart(2, '0')来补0，比你之前的slice(-2)更直观，而且能保证月份和日期都是两位数，符合YYYY-MM-DD的格式要求。

为什么你之前的代码会出问题？ #

你之前的JS代码每次页面加载都会执行，不管用户有没有提交过日期，所以提交后刷新页面时，JS又会把日期重置为默认值。另外，直接用{{ request.form['d1'] }}会在首次加载时因为request.form里没有d1而抛出KeyError（或者渲染为空），导致输入框显示默认的mm/dd/yyyy提示文本。

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