如何为Django ModelForm的DateTimeField添加日期时间选择器？

要实现同时支持日期和时间的选择器，最简便的方式是利用HTML5原生的datetime-local输入控件，修改你的表单代码即可：

修改后的表单代码 #

class ServiceBookerForm(forms.ModelForm):
    service_date = forms.DateTimeField(
        input_formats=['%d/%m/%Y %H:%M', '%Y-%m-%dT%H:%M'],
        widget=forms.DateTimeInput(
            format='%Y-%m-%dT%H:%M',
            attrs={'class': 'form-control', 'type': 'datetime-local'}
        )
    )

    class Meta:
        model = ServiceBooker
        fields = '__all__'
        exclude = ('noteringar',)

关键修改点说明 #

• 添加type='datetime-local'属性：这会让浏览器渲染出原生的日期时间组合选择器，替代普通的文本输入框
• 调整格式匹配：HTML5的datetime-local控件默认使用YYYY-MM-DDTHH:MM格式（比如2024-05-20T14:30），所以需要：
  • 将widget的format设置为%Y-%m-%dT%H:%M，确保数据库中的日期时间值能正确显示在控件中
  • 在input_formats中同时保留你原来的%d/%m/%Y %H:%M格式和新格式，保证两种格式的输入都能被Django正确解析

补充说明 #

如果原生控件的样式不符合需求，也可以使用第三方前端库（比如Flatpickr、Tempus Dominus）实现自定义日期时间选择器，但需要额外引入对应的JS和CSS文件。对于大多数场景，原生控件已足够满足需求，且无需额外依赖。

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