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实现360的字符显示界面
Feb 21 Python
python下MySQLdb用法实例分析
Jun 08 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
Mar 30 Python
使用Python操作FTP实现上传和下载的方法
Apr 01 Python
Python Django给admin添加Action的方法实例详解
Apr 29 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
Jun 13 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
Jul 25 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
Feb 11 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
Jun 24 Python
python读取excel进行遍历/xlrd模块操作
Jul 12 Python
Python 内置函数速查表一览
Jun 02 Python
Python Flask实现进度条
May 11 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
怎样辨别一杯好咖啡
2021/03/03 新手入门
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP中使用curl入门教程
2015/07/02 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
小学教师管理制度
2014/01/18 职场文书
小学生开学感言
2014/02/28 职场文书
同学会主持词
2014/03/18 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015年公司新年寄语
2014/12/08 职场文书
食品质检员岗位职责
2015/04/08 职场文书
创业计划书之美甲店
2019/09/20 职场文书