Django中Tempus Dominus DatePicker编辑数据时显示日期少一天如何解决

问题表现 #

表格内存储的日期展示正常：

点击编辑填充表单时，日期选择器显示日期比实际值少一天：

问题原因 #

该问题由时区转换偏差导致：Django默认以UTC格式存储日期时间数据，Tempus Dominus组件解析数据时会自动转换为浏览器本地时区，若你的本地时区晚于UTC（如美洲各时区），UTC日期的0点转换为本地时间后会落在前一天，最终出现日期少一天的表现。

解决方案 #

第一步：修改Form.py配置 #

1. 替换原生datetime为Django带时区的时间工具
2. 给DatePicker组件指定日期格式、强制UTC时区解析
   修改后的SaleForm相关代码如下：

# 替换原有datetime导入
from django.utils import timezone
from django.forms import *
from django.forms.models import ModelForm
from core.erp.models import Sale
from tempus_dominus.widgets import DatePicker

class SaleForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    class Meta:
        model = Sale
        fields = '__all__'
        widgets = {
            'cli': Select(
                attrs={
                    'class': 'form-control select2'
                }
            ),
            'date_joined' : DatePicker(
                options={
                    # 替换为带时区的当前时间
                    'maxDate': timezone.now().strftime('%Y-%m-%d'),
                    'useCurrent': True,
                    'collapse': False,
                    # 新增以下2行配置
                    'dateFormat': 'YYYY-MM-DD',
                    'timeZone': 'UTC'
                },
                attrs={
                    'append': 'fas fa-calendar',
                    'icon_toggle': True,
                }
            ),
            # 其余字段配置保持不变
            'subtotal': NumberInput(
                attrs={
                    'class':'form-control',
                    'disabled' : True,
                    'autocomplete': 'off'
                }
            ),
            'iva': NumberInput(
                attrs={
                    'class':'form-control'
                }
            ),
            'total': NumberInput(
                attrs={
                    'class':'form-control',
                    'disabled': True,
                    'autocomplete': 'off'
                }
            )
        }
        exclude = ['user_creation', 'user_updated']

第二步：（可选，若第一步未生效）模板新增JS强制修正日期 #

在模板的{% block content %}末尾添加以下JS代码，手动修正日期选择器的取值，跳过自动时区转换：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.querySelector('#id_date_joined');
    if (dateInput.value) {
        // 直接按字符串格式拆分日期，避免时区转换偏差
        const dateParts = dateInput.value.split('-');
        const fixedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
        $(dateInput).datetimepicker('date', fixedDate);
    }
});
</script>

如果你的date_joined字段是纯DateField（不带时间），也可以直接在Django的settings.py中设置USE_TZ = False关闭时区功能，同样可以解决该问题。

内容的提问来源于stack exchange，提问作者Jose Pablo Arancibia Linker