Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
作者:young 时间:2023-06-18 23:56:20
如果你的模型中含有 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
#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 发布日期仍然是文本输入格式,如下图所示:
接下来就是见证奇迹的时刻了。你在模板中稍微增加几行 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 %}
此时你把鼠标移动到日期输入栏,美观的日期和时间选择器就出现了,如下图所示:
工作原理
这几行 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, 强烈推荐。
来源:http://www.bigyoung.cn/posts/75/
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python实现计算文件MD5和SHA1的方法示例
关于MySQL绕过授予information_schema中对象时报ERROR 1044(4200)错误
python生成九宫格图片
![](https://img.aspxhome.com/file/2023/5/81475_0s.png)
JS图片根据鼠标滚动延时加载的实例代码
python读取excel指定列数据并写入到新的excel方法
设计的技术含量
基于PyQT5制作一个桌面摸鱼工具
sqlserver 导出插入脚本代码
PostgreSQL基础知识之SQL操作符实践指南
![](https://img.aspxhome.com/file/2023/1/69481_0s.jpg)
Python 读取位于包中的数据文件
解析JavaScript中的标签语句
Django学习笔记之View操作指南
教你使用pyqt实现桌面歌词功能
![](https://img.aspxhome.com/file/2023/6/127106_0s.gif)
python 实现控制鼠标键盘
Python 数据可视化之Matplotlib详解
![](https://img.aspxhome.com/file/2023/6/101156_0s.png)
js实现微信聊天效果
django中使用原生sql语句的方法步骤
详解Python yaml模块
xmind2022下载非试用超详细图文教程
![](https://img.aspxhome.com/file/2023/3/131963_0s.png)
后端开发使用pycharm的技巧(推荐)
![](https://img.aspxhome.com/file/2023/5/99155_0s.jpg)