Django表单日期显示格式修改：如何改为dd/mm/yyyy

你遇到的问题核心原因是：当你给DateInput设置type='date'时，调用的是HTML5原生日期选择控件，它的显示格式由用户浏览器的系统区域设置决定，而非Django的format参数或全局配置。比如美国区域浏览器默认显示mm/dd/yyyy，欧洲区域则显示dd/mm/yyyy。Django的format和input_formats仅负责后端对提交日期的解析逻辑，不影响前端原生控件的显示。

以下是几种可行的解决方法：

方法1：改用自定义JS日期选择器（推荐） #

放弃HTML5原生控件，使用第三方JS日期选择插件完全控制显示格式，比如flatpickr或Bootstrap Datepicker。

步骤1：修改表单字段代码 #

移除widget的type='date'，改为普通文本输入框并添加标识类：

date = forms.DateField(
    widget=forms.DateInput(
        format='%d/%m/%Y',
        attrs={
            'type': 'text',  # 改为text类型
            'class': 'date-picker',  # 添加类用于JS初始化
            'min': str(timezone.now().date()),
            'max': str((timezone.now() + timedelta(days=365)).date())
        }
    ),
    help_text='Select a date',
    input_formats=['%d/%m/%Y'],
    validators=[validate_future_date],
)

步骤2：引入并初始化JS插件 #

以flatpickr为例，在模板中添加：

<!-- 引入flatpickr的CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- 引入flatpickr的JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
// 初始化日期选择器
flatpickr('.date-picker', {
    dateFormat: "d/m/Y",  // 设置显示格式为dd/mm/yyyy
    minDate: "{{ timezone.now.date }}",
    maxDate: "{{ timezone.now.date|date:'Y-m-d'|add_days:365 }}"
});
</script>

这样就能强制显示dd/mm/yyyy格式，且提交的日期能被Django正确解析。

方法2：通过浏览器区域设置调整（仅针对原生控件） #

如果坚持使用HTML5原生type='date'控件，只能让用户调整浏览器或系统的区域设置：

• Windows：设置 > 时间和语言 > 区域 > 格式，选择“英语（英国）”或其他使用dd/mm/yyyy的区域
• macOS：系统设置 > 通用 > 语言与地区 > 地区，选择对应区域
• 浏览器：部分浏览器可单独设置区域（比如Chrome的设置 > 高级 > 语言 > 语言，添加并设置优先语言为英式英语）

但这种方法无法强制所有用户生效，仅适用于内部系统或可控用户群体。

方法3：前端JS转换显示（原生控件兼容方案） #

如果必须保留原生控件，可通过JS在用户选择日期后，将显示值转换为dd/mm/yyyy。注意：原生控件的实际提交值仍为yyyy-mm-dd（HTML5标准格式），Django能自动解析这种格式，无需修改后端input_formats。

示例JS代码：

<script>
document.querySelector('input[type="date"]').addEventListener('change', function(e) {
    const date = new Date(e.target.value);
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    this.setAttribute('data-display', `${day}/${month}/${year}`);
});
</script>

<style>
input[type="date"]::-webkit-datetime-edit {
    display: none;
}
input[type="date"]::after {
    content: attr(data-display);
    padding: 0 5px;
}
</style>

这种方法存在浏览器样式兼容性问题，需谨慎使用。

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