Django 2.0中ModelForm的DateField无法显示为日期组件问题

我来帮你解决这个问题！默认情况下Django的DateField会渲染成普通文本输入框，要让它变成带Bootstrap样式的日期选择组件，你可以通过以下几种简单方法实现：

方法1：在ModelForm中显式指定Widget #

直接在你的CreateNewPatient表单类里，为date_of_birth字段指定带Bootstrap样式的日期输入控件。修改后的表单代码如下：

from django import forms
from . import models

class CreateNewPatient(forms.ModelForm):
    date_of_birth = forms.DateField(
        widget=forms.DateInput(
            attrs={
                'type': 'date',
                'class': 'form-control'  # 匹配Bootstrap的表单控件样式
            }
        )
    )

    class Meta:
        model = models.PatientInfo
        fields = ['first_name', 'nickname','last_name', 'date_of_birth', 'school_grade', 'sex', 'school']

这样设置后，浏览器会渲染原生的HTML5日期选择器，同时form-control类会让它和其他表单字段的Bootstrap样式保持一致。

方法2：利用django-bootstrap4的自动配置 #

既然你在模板里用了{% bootstrap_form %}，说明依赖django-bootstrap4库，那可以通过表单的widgets元选项简化设置，不需要单独声明字段：

from django import forms
from . import models

class CreateNewPatient(forms.ModelForm):
    class Meta:
        model = models.PatientInfo
        fields = ['first_name', 'nickname','last_name', 'date_of_birth', 'school_grade', 'sex', 'school']
        widgets = {
            'date_of_birth': forms.DateInput(attrs={'type': 'date'}),
        }

django-bootstrap4会自动给所有表单控件添加form-control类，所以这里只需要指定type="date"就能触发原生日期选择器，样式会自动匹配Bootstrap。

方法3：使用Admin日期控件（可选） #

如果你偏好Django后台那种弹窗式的日期选择器，可以用django.contrib.admin.widgets.AdminDateWidget，但需要额外加载相关静态资源：

1. 修改表单代码：

from django import forms
from . import models
from django.contrib.admin import widgets

class CreateNewPatient(forms.ModelForm):
    date_of_birth = forms.DateField(widget=widgets.AdminDateWidget)

    class Meta:
        model = models.PatientInfo
        fields = ['first_name', 'nickname','last_name', 'date_of_birth', 'school_grade', 'sex', 'school']

2. 在模板的{% bootstrap_form %}之前加载Admin静态资源：

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}">
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/calendar.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>

不过这种方法的样式和Bootstrap可能存在冲突，需要额外调整CSS，所以更推荐前两种轻量方案。

修改后测试一下，你的date_of_birth字段就会显示为带Bootstrap样式的标准日期组件啦！

内容的提问来源于stack exchange，提问作者Tim B.