Django中widget attrs={'type':'date'}设置无效问题求助

核心问题根源 #

你创建内联表单集时，直接调用inlineformset_factory(Wine, Bottle, ...)但未指定使用自定义的BottleForm，导致表单集生成的是默认ModelForm，完全忽略了你在BottleForm中配置的日期输入框widget，这就是所有设置无效的关键原因。此外，原视图的POST请求处理逻辑错误，没有用表单集处理提交数据。

修复步骤 #

1. 修正视图中的表单集创建与POST逻辑

修改add_new_bottle视图，指定使用自定义BottleForm，并修复表单集的提交处理：

def add_new_bottle(request, pk):
    # 新增form参数，关联自定义BottleForm
    WineFormSet = inlineformset_factory(Wine, Bottle, form=BottleForm, fields=('date_bought', 'bottleprice', 'available', 'drank_on'))
    wine = Wine.objects.get(id=pk)
    formset = WineFormSet(instance=wine)
    
    if request.method == "POST":
        # 用表单集处理POST数据，而非单独的BottleForm
        formset = WineFormSet(request.POST, instance=wine)
        if formset.is_valid():
            formset.save()
            return redirect('wine_detail', pk=wine.pk)  # 跳回对应酒款详情页更合理

    context = {'formset':formset}
    return render(request, 'winedb/bottle_form.html', context)

2. 优化BottleForm的配置

移除重复的字段定义，统一用自定义组件配置日期输入：

from django import forms
from .models import Wine, Bottle

# 自定义日期输入组件
class DateInput(forms.DateInput):
    input_type = 'date'

class WineForm(forms.ModelForm):
    class Meta:
        model = Wine
        fields = ('producer', 'name', 'year', 'alcohol', 'grape', 'colour', 'wine_type', 'notes', 'wishlist')

class BottleForm(forms.ModelForm):
    class Meta:
        model = Bottle
        # 内联表单自动关联wine字段，无需在fields中列出
        fields = ('date_bought', 'bottleprice', 'available', 'drank_on') 
        widgets= {
            'date_bought': DateInput(),
            'drank_on': DateInput(),  # 可选：将drank_on也改为标准日期选择器
        }

3. 完善模板渲染逻辑

必须渲染表单集的management_form，否则提交会报错，可选保留crispy样式：

{% extends 'winedb/base.html' %}
{% load crispy_forms_tags %}

{% block content %}
    <h2>添加新酒瓶</h2>
    <form method="POST" class="post-form">{% csrf_token %}
        {% for form in formset%}
            {{ form|crispy }}
            <hr>
        {% endfor %}
        {{ formset.management_form }}  <!-- 表单集必需的管理字段 -->
        <button type="submit" class="save btn btn-secondary">保存</button>
    </form>
{% endblock %}

验证效果 #

修改完成后，表单集中的date_bought和drank_on字段会自动渲染为浏览器原生的日期选择器，无需额外依赖前端框架。

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