无法将TempusDominus Bootstrap4插件日期值传入Django表单

我用TempusDominus Bootstrap4日期选择器实现日期选择功能，但选中的日期值无法传入Django表单，没法保存到数据库。以下是相关代码：

HTML代码 #

<div class="col-md-3">
    <label> Approved Date:</label>
    <div class="input-group date" id="{{ form.ApprovedDate.id_for_label }}"
         data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" id="{{ form.ApprovedDate.id_for_label }}" name="{{ form.ApprovedDate.id_for_label }}"
               data-target="#{{ form.ApprovedDate.id_for_label }}"/>
        <div class="input-group-append"
             data-target="#{{ form.ApprovedDate.id_for_label }}"
             data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>

jQuery脚本 #

<script>
    $(function () {
        $('#{{ form.ApprovedDate.id_for_label }}').datetimepicker({
            format: 'DD-MM-YYYY'
        });
    })
</script>

Django表单代码（views.py） #

class ProjectForm(forms.ModelForm): #views.py
    class Meta:
        model = Project
        fields = '__all__'

    def save(self, commit=True):
        instance = super().save(commit=False)
        instance.created_on = timezone.now()  # Import timezone if not already imported
        instance.createdBy = 0
        if commit:
            instance.save()
        return instance

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

Django视图代码 #

def create_project(request):
    if request.method == 'POST':
        form = ProjectForm(request.POST)
        if form.is_valid():
            form.save()  # Save to the database with the modified fields
            return redirect('projects:project_list')  # Redirect to the list view
    else:
        form = ProjectForm()
    return render(request, 'create_project.html', {'form': form})

我试过导入tempusdominus包，但希望有更简单的方案来获取日期值并传入数据库。我是Django新手，之前有Java/JSP开发背景。

解决方案 #

1. 修正表单字段的name属性 #

Django表单通过字段的name属性识别数据，你当前用了id_for_label作为name，这是错误的。把input的name属性改成：

name="{{ form.ApprovedDate.name }}"

2. 统一日期格式匹配 #

TempusDominus设置的格式是DD-MM-YYYY，但Django默认DateField期望YYYY-MM-DD格式，二选一调整即可：

• 方案一：修改日期选择器格式
  直接让选择器输出Django默认格式：

  $('#{{ form.ApprovedDate.id_for_label }}').datetimepicker({
      format: 'YYYY-MM-DD'
  });
  

• 方案二：在Django表单中适配输入格式
  若要保留DD-MM-YYYY显示，在表单中指定该字段的输入格式：

  class ProjectForm(forms.ModelForm):
      ApprovedDate = forms.DateField(
          input_formats=['%d-%m-%Y'],
          widget=forms.TextInput(attrs={'class': 'form-control'})
      )
  
      class Meta:
          model = Project
          fields = '__all__'
      # 原有save、__init__方法不变
  

3. 修复重复ID问题 #

HTML中div.input-group和input用了同一个ID，会导致DOM识别混乱。给容器div换个ID：

<div class="col-md-3">
    <label> Approved Date:</label>
    <div class="input-group date" id="{{ form.ApprovedDate.id_for_label }}-container"
         data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" id="{{ form.ApprovedDate.id_for_label }}" name="{{ form.ApprovedDate.name }}"
               data-target="#{{ form.ApprovedDate.id_for_label }}-container"/>
        <div class="input-group-append"
             data-target="#{{ form.ApprovedDate.id_for_label }}-container"
             data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>

同时调整jQuery选择器：

$('#{{ form.ApprovedDate.id_for_label }}-container').datetimepicker({
    format: 'DD-MM-YYYY' // 或YYYY-MM-DD，对应上面的格式选择
});

4. 调试表单错误 #

在视图中添加错误打印，方便排查问题：

def create_project(request):
    if request.method == 'POST':
        form = ProjectForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('projects:project_list')
        else:
            # 打印错误到控制台，便于调试
            print(form.errors)
    else:
        form = ProjectForm()
    return render(request, 'create_project.html', {'form': form})

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