如何在Django模板中实现Admin式DateTimeField日期时间选择器？

要在自定义模板里实现和Admin相同的日期时间选择功能，你可以复用Django Admin自带的组件和静态资源，具体步骤如下：

1. 在表单中使用Admin的日期时间Widget #

如果用ModelForm处理表单，直接指定date字段使用Admin的AdminDateTimeWidget：

from django.contrib.admin.widgets import AdminDateTimeWidget
from django import forms
from .models import Event

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        fields = '__all__'
        widgets = {
            'date': AdminDateTimeWidget(),
        }

2. 在模板中加载Admin的静态资源 #

在你的自定义模板头部，引入Admin所需的CSS和JS文件，这些是日期选择器正常工作的依赖：

{% load static %}

<!-- 引入Admin样式文件 -->
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}">

<!-- 引入Admin依赖的JS文件 -->
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>

3. 渲染表单字段 #

在表单区域正常渲染date字段即可，Widget会自动生成带日期时间选择器的输入框：

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">提交</button>
</form>

这样就能得到和Django Admin完全一致的日期时间选择组件，包含日历选择和时间调整功能。

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