Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

如果你的模型中含有 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, 强烈推荐。

总结

到此这篇关于Django 如何使用日期时间选择器规范用户的时间输入的文章就介绍到这了,更多相关 Django 如何使用日期时间选择器规范用户的时间输入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用Django xadmin 实现修改时间选择器为不可输入状态

    反馈说在选择时间时会出现遮挡选择器的情况,阻碍操作 如下图 1,需要修改xadmin 文件 ,在widgets.py --->第28行添加attrs["readonly"] ="readonly" 2,修改完成就是下面这种 补充知识:django-xadmin的登陆权限设置操作 1.在utils/新建一个文件minx_utils.py文件里面 # coding=utf-8 from django.contrib.auth.decorators import l

  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_

  • Python生成验证码、计算具体日期是一年中的第几天实例代码详解

    1.约瑟夫环问题 <幸运的基督徒> 有15个基督徒和15个非基督徒在海上遇险,为了能让一部分人活下来不得不将其中15个人扔到海里面去,有个人想了个办法就是大家围成一个圈,由某个人开始从1报数,报到9的人就扔到海里面,他后面的人接着从1开始报数,报到9的人继续扔到海里面,直到扔掉15个人.由于上帝的保佑,15个基督徒都幸免于难,问这些人最开始是怎么站的,哪些位置是基督徒哪些位置是非基督徒. def main(): ''' 先用列表中每个数字代表每个人,然后通过循环替换列表中的数字 用@代表基督徒

  • django在保存图像的同时压缩图像示例代码详解

    假设我们有一个非常简单的Post模型,它将是一个图像及其描述, from django.db import models class Post(models.Model): text = models.TextField() image = models.ImageField(upload_to='images/') 但是我们要优化图像大小,这将由我们Post的image字段指出. 这样做有充分的理由-它有助于更快地加载网站/应用程序并减少我们的服务器存储. 在使用Django之前,首先让我们简

  • java8 时间日期的使用与格式化示例代码详解

    目录 LocalDate LocalTime LocalDateTime Instant Duration Period ZoneId 时间与字符串之间的转化 与旧Date API的转换 LocalDate // 日期 LocalDate localDate = LocalDate.now(); System.out.println(localDate); // yyyy-MM-dd System.out.println(localDate.getYear()); // 年 System.out

  • Django中F函数的使用示例代码详解

    F()函数 F()函数的导入 from django.db.models import F 为什么要使用F()函数? 一个 F()对象代表了一个model的字段值或注释列.使用它就可以直接参考model的field和执行数据库操作而不用再把它们(model field)查询出来放到python内存中. 开发个人博客时,统计每篇文章浏览量的逻辑通常是这样写的: post = Post.objects.get(...) post.views += 1 post.save() 上面的语句已经相当简短了

  • vant 时间选择器--开始时间和结束时间实例

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart"> <div

  • java时间日期使用与查询代码详解

    只要格式正确,直接比较字符串就可以了呀,精确到秒的也一样 String s1 = "2003-12-12 11:30:24"; String s2 = "2004-04-01 13:31:40"; int res = s1.compareTo(s2); 求日期差 SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date begin=df.parse("

  • Django用户身份验证完成示例代码

    在这篇Django文章中,wom 将讨论Django User 验证,Django附带了一个用户认证系统. 它处理用户帐户,组,权限和基于cookie的用户会话. Django身份验证系统同时处理身份验证和授权. 简要地说,身份验证将验证用户是他们声称的身份,而授权则确定允许经过身份验证的用户执行的操作. 基本上,我们将创建登录,注销,忘记密码和重置密码功能. 身份验证支持在django.contrib.auth中为Django contrib模块.默认情况下,所需的配置已包含在django-a

  • SpringMVC开发restful API之用户查询代码详解

    一,什么是restful风格? 首先,我们来看几组例子. 传统的url: 查询 /user/query?name=tom GET 详情 /user/query?id=1 GET 创建 /user/create?name=tom POST 修改 /user/update?id=1&name=jerry POST 删除 /user/delete?id=1 GET restful风格的url: 查询 /user?name=tom GET 详情 /user/1 GET 创建 /user POST 修改

  • Java时间类Date类和Calendar类的使用详解

    起因:写代码的时候经常会用到获取当前时间戳和日期,现总结如下 public void testDate() { //SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");//设置日期格式 Date date = new Date(); String dateString = date.toString(); long times = date.getTime(); System.out.println("date.t

随机推荐