datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker
如果你的模型中含有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
class ArticleForm(forms.ModelForm):class Meta:model = Articleexclude = ()
视图和URLConf
#views.py
class ArticleCreateView(CreateView):model = Articleform_class = ArticleFormtemplate_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" class="btn btn-success" value="Save content"></p></form>
{% endblock %}
此时当你创建文章时,你将看到pub_date发布日期仍然是文本输入格式,如下图所示:
接下来就是见证奇迹的时刻了。你在模板中稍微增加几行js的代码,如下所示:
{% block content %}<form action="" method="post" enctype="multipart/form-data">{{ form.as_p }}{% csrf_token %}<p><input type="submit" class="btn btn-success" value="Save content"></p></form>
{% 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, 强烈推荐。
大江狗
2019.12.9
datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker相关推荐
- vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点
在elementUI的el-date-picker中默认为选中的0点到第二个选中的0点 相应代码: <el-date-picker size="mini" v-model=& ...
- php用什么服务器系统时间格式,php中时间戳和日期格式的转换
一,PHP时间戳函数获取指定日期的unix时间戳 strtotime("2009-1-22″) 示例如下: echo strtotime("2009-1-22″) 结果:12325 ...
- java List最大_在java中获取List集合中最大的日期时间操作
取list集合中最大的日期, 可以用date max = collections.max(datelist);, 传入一个日期集合, 就可以获取, 工作中有这个需求, 就查找到这个, 代码如下 } e ...
- ISO8601和UTC 时间,由秒数转化日期时间,日期到秒数
ISO8601和UTC 时间,由秒数转化日期时间,日期到秒数 ISO8601时间格式:2018-6-5T17:46:50Z UTC时间格式: 2018-06-05T03:46:50+08:00 等同 ...
- 两个时间计算毫秒在线_SPL 的日期时间函数(下)
4使用日期时间数据的计算 除了直接从日期时间数据中获取信息,在SPL中还可以使用日期时间类数据来执行各类计算. 最常用的有关日期的计算就是计算年龄: A1和B1中的数据如下: 在第2行用age() 函 ...
- python日期格式统一化: 各种日期时间格式处理为标准统一日期时间格式
python日期格式统一化: 各种日期时间格式处理为标准统一日期时间格式 import traceback import pandas as pd aa = ['2021年12月11日 19:19', ...
- linux java new date_Linux java Tomcat 项目中 new Date 获取时间 8小时 时差
转载自: https://blog.csdn.net/liqinghuiyx/article/details/53333284 起因:在本地开发的WEB项目部署到Linux 下后,存入数据库的时间少了 ...
- python调用qq互联_Django项目中实现使用qq第三方登录功能
使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...
- 修改远程计算机时间,win10电脑中的远程协助时间限制怎么设置
win10电脑中的远程协助时间限制怎么设置 腾讯视频/爱奇艺/优酷/外卖 充值4折起 今天给大家介绍一下win10电脑中的远程协助时间限制怎么设置的具体操作步骤. 1. 打开电脑,进入桌面,点击任务栏 ...
最新文章
- python基础 练习题
- OpenCvSharp 形态学操作(膨胀、腐蚀)
- 谁说LINQ复杂查询不支持返回实名类型~复杂结果集中再使用复杂结果集
- oracle em 双网卡,VirtualBox 双网卡配置
- c莫比乌斯函数_代佳璇缘起一条莫比乌斯环,我爱上了难缠的数学!
- 使用DOM解析常用方法
- MySQL(八)MySQL性能优化
- 为啥 Response.Write 后,View就不渲染了?
- 实现option上下移动_js: 实现Select的option上下移动 | 学步园
- 利用知名站点欺骗挂马
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
- System.Windows.Forms.ListView
- Apache 服务器端安装配置(Windows版本)
- 1093 字符串A+B (20 point(s)) - PAT乙级真题
- 在线YAML转TOML工具
- 《Android游戏开发详解》一2.17 对象是独立的
- ZooKeeper之(一)ZooKeeper是什么
- MySQL备份还原——mysqldump工具介绍
- 获取当前时间戳的方法
- LGTM : code review 行话