时间:2021-05-22
如果你的模型中含有 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.pyclass 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,强烈推荐。
总结
到此这篇关于Django 如何使用日期时间选择器规范用户的时间输入的文章就介绍到这了,更多相关 Django 如何使用日期时间选择器规范用户的时间输入内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQueryDateRangePicker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的
我们经常会应用到日期和时间选择器,之前我们使用最多的是jQueryUI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期
本文实例为大家分享了flutter日期时间选择器的具体代码,供大家参考,具体内容如下1日期选择器//设置默认显示的日期为当前DateTimeinitialDat
微信小程序选择器(时间,日期,地区)微信小程序开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例
具体代码如下所述:Vue.js中使用iView日期选择器并设置开始时间结束时间校验开始时间:结束时间:newVue({el:'#app',data(){retu