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


Posted in Python onMay 22, 2020

如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题。一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示。小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker。

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

示范模型

假如我们有如下一个 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 发布日期仍然是文本输入格式,如下图所示:

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

接下来就是见证奇迹的时刻了。你在模板中稍微增加几行 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 %}

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

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

工作原理

这几行 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 相关文章推荐
Python学习资料
Feb 08 Python
Python自动扫雷实现方法
Jul 25 Python
浅谈python之新式类
Aug 12 Python
python pands实现execl转csv 并修改csv指定列的方法
Dec 12 Python
python使用sklearn实现决策树的方法示例
Sep 12 Python
Python 中list ,set,dict的大规模查找效率对比详解
Oct 11 Python
Python实现Word表格转成Excel表格的示例代码
Apr 16 Python
浅谈python锁与死锁问题
Aug 14 Python
Python unittest装饰器实现原理及代码
Sep 08 Python
Python爬虫之Selenium设置元素等待的方法
Dec 04 Python
python中re模块知识点总结
Jan 17 Python
利用python做数据拟合详情
Nov 17 Python
python实现猜单词游戏
May 22 #Python
Django使用rest_framework写出API
May 21 #Python
使用keras根据层名称来初始化网络
May 21 #Python
关于Keras Dense层整理
May 21 #Python
Django如何使用redis作为缓存
May 21 #Python
如何打包Python Web项目实现免安装一键启动的方法
May 21 #Python
keras之权重初始化方式
May 21 #Python
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php 分库分表hash算法
2009/11/12 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PDO::commit讲解
2019/01/27 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
python正则表达式match和search用法实例
2015/03/26 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Java面试题及答案
2012/09/08 面试题
教师找工作推荐信
2013/11/23 职场文书
公司道歉信范文
2014/01/09 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
工作表扬信
2015/01/17 职场文书
借条格式范本
2015/05/25 职场文书
2016新年致辞
2015/08/01 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
服务器nginx权限被拒绝解决案例
2022/09/23 Servers
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python