Django ModelForm搭配Bootstrap DatePicker选月时的验证错误求助

遇到的问题 #

• 控制台报错：The specified value "01/04/2023" does not conform to the required format. The format is "yyyy-MM" where yyyy is year in four or more digits, and MM is 01-12
• 表单提交时验证失败：

  periodo: Enter a valid date.
  limite_retroactividad: Enter a valid date.
  

• 自定义JS脚本仅对初始日期生效，无法解决数据保存时的格式不匹配问题

核心原因 #

Django默认的DateInput组件输出dd/mm/yyyy格式的日期值，但HTML5的type="month"输入框要求值为yyyy-MM格式，前后端格式不匹配导致验证失败。

解决方案 #

1. 自定义适配yyyy-MM格式的Widget #

替换默认DateInput，编写自定义Widget处理日期格式的输入输出：

修改forms.py：

from django import forms
from django.forms.widgets import DateInput

class MonthInput(DateInput):
    input_type = 'month'

    def format_value(self, value):
        # 将Date对象转为yyyy-MM格式字符串
        if value is None:
            return ''
        return value.strftime('%Y-%m')

    def value_from_datadict(self, data, files, name):
        # 解析yyyy-MM格式字符串为Date对象（取当月第一天）
        value = data.get(name)
        if value:
            return f"{value}-01"
        return value

class RegistroGestionForm(ModelForm):
    def __init__(self, *args, **kwargs):
        self.request = kwargs.pop('request', None)
        super().__init__(*args, **kwargs)

    def clean(self):
        cleaned_data = super().clean()
        periodo = cleaned_data.get('periodo')
        limite_retroactividad = cleaned_data.get('limite_retroactividad')

        if periodo and limite_retroactividad:
            if periodo < limite_retroactividad:
                self.add_error('limite_retroactividad', 'El periodo no puede ser menor al límite de retroactividad')
        return cleaned_data

    class Meta:
        model = RegistroGestion
        fields = ['periodo', 'estado', 'limite_retroactividad']
        widgets = {
            'limite_retroactividad': MonthInput(
                attrs={'class': "form-select mb-3"}
            ),
            'periodo': MonthInput(
                attrs={'class': "form-select mb-3"}
            ),
        }

2. 优化前端日期选择配置（可选） #

如果继续使用Bootstrap Datepicker，需配置其输出格式与后端一致，同时移除冗余引用：

修改form.html的extra_head部分：

{% block extra_head %}
<link rel="stylesheet" href="{% static 'lib/bootstrap-datepicker/bootstrap-datepicker3.css' %}"/>
<script src="{% static 'lib/bootstrap-datepicker/bootstrap-datepicker.min.js' %}"></script>
<script>
$(document).ready(function(){
    $('.form-select.mb-3').datepicker({
        format: "yyyy-mm",
        startView: "months", 
        minViewMode: "months",
        autoclose: true
    });
});
</script>
{% endblock extra_head %}

若无需插件，直接使用HTML5原生month输入，可移除所有Datepicker引用。

3. 调整验证逻辑（可选） #

如果业务仅需比较年月而非具体日期，可优化clean方法：

def clean(self):
    cleaned_data = super().clean()
    periodo = cleaned_data.get('periodo')
    limite_retroactividad = cleaned_data.get('limite_retroactividad')

    if periodo and limite_retroactividad:
        # 仅比较年月
        periodo_ym = (periodo.year, periodo.month)
        limite_ym = (limite_retroactividad.year, limite_retroactividad.month)
        if periodo_ym < limite_ym:
            self.add_error('limite_retroactividad', 'El periodo no puede ser menor al límite de retroactividad')
    return cleaned_data

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