如果你的模型中含有datetime类型的字段，表单中需要用户输入日期和时间，那么你如何保证不同用户输入的时间都遵循一定的格式(DD/MM/YYYY 或者YYYY-MM-DD)是个必须要考虑的问题。一个更好的方式是在前端使用日期时间选择器DateTimePicker，以日历的形式统一选择输入时间，如下图所示。小编今天将尝试以最少的代码教你实现如何在Django项目中实现日期时间选择器DateTimePicker。
示范模型
假如我们有如下一个Article模型，含有pub_date字段，其格式是DateTimeField。
#models.py
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 = Articleexclude = （）
视图和URLConf
#views.py
class ArticleCreateView(CreateView):model = Articleform_class = ArticleFormtemplate_name = 'blog/article_form.html'
#urls.py
re_path(r'^article/create/$', views.ArticleCreateView.as_view(), name='article_create'),
模板
#template/blog/article_form.html
{% block content %}<form action="" method="post" enctype="multipart/form-data">{{ form.as_p }}{% csrf_token %}<p><input type="submit" class="btn btn-success" value="Save content"></p></form>{% endblock %}
此时当你创建文章时，你将看到pub_date发布日期仍然是文本输入格式，如下图所示:
接下来就是见证奇迹的时刻了。你在模板中稍微增加几行js的代码，如下所示:
{% block content %}<form action="" method="post" enctype="multipart/form-data">{{ form.as_p }}{% csrf_token %}<p><input type="submit" class="btn btn-success" value="Save content"></p></form>{% endblock %}{% block js %}<!-- XDSoft DateTimePicker --><link rel="stylesheet" href="/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" /><script src="/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script><script>$(function () {$("#id_pub_date").datetimepicker( {format:'Y-m-d H:i',});});</script>{% endblock %}
此时你把鼠标移动到日期输入栏，美观的日期和时间选择器就出现了，如下图所示：
工作原理
这几行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, 强烈推荐。
大江狗
.12.9
