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 相关文章推荐
Python3通过Luhn算法快速验证信用卡卡号的方法
May 14 Python
Python复数属性和方法运算操作示例
Jul 21 Python
Python3.5模块的定义、导入、优化操作图文详解
Apr 27 Python
Python 把序列转换为元组的函数tuple方法
Jun 27 Python
Python叠加两幅栅格图像的实现方法
Jul 05 Python
django fernet fields字段加密实践详解
Aug 12 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
Oct 24 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
Nov 08 Python
Python(PyS60)实现简单语音整点报时
Nov 18 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
Apr 08 Python
python实现人像动漫化的示例代码
May 17 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
Dec 04 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跨站刷票的实现代码
2013/06/18 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
js运动事件函数详解
2016/10/21 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
在vue中使用Base64转码的案例
2020/08/07 Javascript
wxPython之解决闪烁的问题
2018/01/15 Python
Flask框架信号用法实例分析
2018/07/24 Python
python根据多个文件名批量查找文件
2019/08/13 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python sep参数使用方法详解
2020/02/12 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
计划生育宣传标语
2014/06/21 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
八年级作文之友情
2019/11/25 职场文书
php字符串倒叙
2021/04/01 PHP
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python