Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

class Article(models.Model):
 """文章模型"""

 title = models.CharField('标题', max_length=200, db_index=True)
 pub_date = models.DateTimeField('发布时间', null=True)

#forms.py
class ArticleForm(forms.ModelForm):
 class Meta:
 model = Article
 exclude = （）

class ArticleCreateView(CreateView):
 model = Article
 form_class = ArticleForm
 template_name = 'blog/article_form.html'

re_path(r'^article/create/$', views.ArticleCreateView.as_view(), name='article_create'),

{% block content %}
 <form action="" method="post" enctype="multipart/form-data">
 {{ form.as_p }}
 {% csrf_token %}
 <p><input type="submit" value="Save content"></p>
 </form>
 </p>
{% endblock %}

 <form action="" method="post" enctype="multipart/form-data">
 {{ form.as_p }}
 {% csrf_token %}
 <p><input type="submit" value="Save content"></p>
 </form>
 </p>
{% endblock %}
{% block js %}
<!-- XDSoft DateTimePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
 <script src="/UploadFiles/2021-04-08/jquery.datetimepicker.full.min.js">

此时你把鼠标移动到日期输入栏，美观的日期和时间选择器就出现了，如下图所示：

工作原理
这几行 Js 的代码作用是引入 XDSoft DateTimePicker 的 js 代码和 css 样式，针对 id_pub_date 的表单字段生成一个 datetimepicker 的实例，并设置输入日期和时间格式。如果你在模型中 DateTimeField 的字段名为 visit_date, 你只需为 id_visit_date 再生成一个实例即可。Django 的表单会默认为每个输入字段 id 加上 id_的前缀。
前端基于 JS 的日期和时间选择器很多，比如 BootstrapDateTimePicker，Fengyuanzhen's DateTimePicker, 但 Django 中最简易方便使用的还是 XDSoft DateTimePicker, 强烈推荐。
总结