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

 更新时间:2020年05月22日 08:45:20   作者:young  
这篇文章主要介绍了 Django 如何使用日期时间选择器规范用户的时间输入,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

如果你的模型中含有 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

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

视图和 URLConf

#views.py

class ArticleCreateView(CreateView):
 model = Article
 form_class = ArticleForm
 template_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" value="Save content"></p>
 </form>
 </p>
{% endblock %}

此时当你创建文章时,你将看到 pub_date 发布日期仍然是文本输入格式,如下图所示:

接下来就是见证奇迹的时刻了。你在模板中稍微增加几行 js 的代码,如下所示:

 <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="https://cdnjs.cloudflare.com/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, 强烈推荐。

总结

到此这篇关于Django 如何使用日期时间选择器规范用户的时间输入的文章就介绍到这了,更多相关 Django 如何使用日期时间选择器规范用户的时间输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何将python文件打包成exe可运行文件

    如何将python文件打包成exe可运行文件

    这篇文章主要介绍了将python文件打包成exe可运行文件的步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • python 如何获取页面所有a标签下href的值

    python 如何获取页面所有a标签下href的值

    这篇文章主要介绍了python 获取页面所有a标签下href的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-05-05
  • python中sys.path.append的作用

    python中sys.path.append的作用

    本文主要介绍了python中sys.path.append的作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • Python+ChatGPT实现5分钟快速上手编程

    Python+ChatGPT实现5分钟快速上手编程

    最近一段时间chatGPT火爆出圈!无论是在互联网行业,还是其他各行业都赚足了话题。俗话说:“外行看笑话,内行看门道”,今天从chatGPT个人体验感受以及如何用的角度来分享一下
    2023-02-02
  • Python的Flask框架中实现分页功能的教程

    Python的Flask框架中实现分页功能的教程

    这篇文章主要介绍了Python的Flask框架中实现分页功能的教程,文中的示例基于一个博客来实现,需要的朋友可以参考下
    2015-04-04
  • Python 限定函数参数的类型及默认值方式

    Python 限定函数参数的类型及默认值方式

    今天小编就为大家分享一篇Python 限定函数参数的类型及默认值方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-12-12
  • Jupyter Notebook读取csv文件出现的问题及解决

    Jupyter Notebook读取csv文件出现的问题及解决

    这篇文章主要介绍了Jupyter Notebook读取csv文件出现的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • selenium查找网页出现加载卡顿或失败的解决方法

    selenium查找网页出现加载卡顿或失败的解决方法

    这篇文章主要为大家详细介绍了selenium查找网页时如何处理网站资源一直加载非常卡顿或者失败的情况,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-10-10
  • python docx如何修改word表格内容

    python docx如何修改word表格内容

    使用Python-docx库,可以方便地修改Word文档中的表格内容,首先需要安装python-docx库,然后使用该库打开Word文档,遍历文档中的表格并修改指定单元格内容,最后另存为新文档
    2024-09-09
  • OpenCV3.0+Python3.6实现特定颜色的物体追踪

    OpenCV3.0+Python3.6实现特定颜色的物体追踪

    这篇文章主要为大家详细介绍了OpenCV3.0+Python3.6实现特定颜色的物体追踪,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论