Django 表单提交后如何保留 datetimepicker 等输入控件的原有值

第一步：确认后端表单实例化逻辑正确 #

• 只要触发POST请求，必须把POST数据完整传入表单实例，不需要等验证通过再传，示例视图代码：

def event_view(request):
    if request.method == "POST":
        # 优先把POST数据传入表单，后续再做验证逻辑
        event_form = EventForm(request.POST)
        if event_form.is_valid():
            event_form.save()
            # 其他后续逻辑
    else:
        event_form = EventForm()
    return render(request, "event.html", {"event_form": event_form})

第二步：统一前后端日期时间格式 #

• 90%的丢失问题是前后端格式不匹配导致datetimepicker识别不了后端返回的初始值，直接清空。你需要在Django表单类中显式指定字段的输入输出格式，和前端datetimepicker的格式完全对齐：

class EventForm(forms.ModelForm):
    # 假设你的日期时间字段是event_time
    event_time = forms.DateTimeField(
        input_formats=["%Y-%m-%d %H:%M:%S"],
        widget=forms.DateTimeInput(
            format="%Y-%m-%d %H:%M:%S",
            attrs={"class": "datetimepicker-input"}
        )
    )
    class Meta:
        model = Event
        fields = ["description", "event_type", "dfkl_id", "event_time"]

第三步：调整datetimepicker初始化配置 #

• 绝大多数datetimepicker组件初始化时默认会覆盖输入框原有值，你需要在初始化时主动读取输入框现有值作为默认值，以bootstrap-datetimepicker为例：

$('.datetimepicker-input').datetimepicker({
    // 和后端指定的格式完全一致
    format: 'YYYY-MM-DD HH:mm:ss',
    // 读取输入框现有值作为默认值，没有值则留空
    defaultDate: $('.datetimepicker-input').val() || null
})

特殊情况：手动写输入框的处理 #

• 如果你没有用Django表单的{{ event_form.event_time }}语法渲染输入框，而是手动编写了HTML输入标签，需要显式给输入框绑定value值：

<input 
  type="text" 
  name="event_time" 
  class="datetimepicker-input" 
  value="{{ event_form.event_time.value|default:'' }}"
>

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