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 相关文章推荐
py中的目录与文件判别代码
Jul 16 Python
Python实现扫描指定目录下的子目录及文件的方法
Jul 16 Python
在Linux下使用Python的matplotlib绘制数据图的教程
Jun 11 Python
200 行python 代码实现 2048 游戏
Jan 12 Python
python pandas库中DataFrame对行和列的操作实例讲解
Jun 09 Python
Python元组知识点总结
Feb 18 Python
浅谈Python批处理文件夹中的txt文件
Mar 11 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
Jul 28 Python
python实现测试工具(二)——简单的ui测试工具
Oct 19 Python
python中的列表和元组区别分析
Dec 30 Python
python asyncio 协程库的使用
Jan 21 Python
提取视频中的音频 Python只需要三行代码!
May 10 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重定向与伪静态区别
2017/02/19 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Vue内部渲染视图的方法
2019/09/02 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
北体毕业生求职信
2014/02/28 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
三方股份合作协议书
2014/10/13 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
本溪水洞导游词
2015/02/11 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2019秋季运动会口号
2019/06/25 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
Nginx HTTP跳转至HTTPS
2022/05/15 Servers