交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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 如何使用日期时间选择器规范用户的时间输入内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼!


    广而告之:
    热门推荐:
    SQL Server利用bcp命令把SQL语句结果生成文本文件

    在SQL Server里可以调用DOS下的命令行工具bcp来实现把表里的数据或者SQL语句结果生成文本文件。 BCP命令的参数格式: 复制代码 代码如下: BCP {dbtable | query} {in | out | queryout | format} datafile [-m maxerrors]      [-f formatfile]     [-e errfile] [-···

    nodejs中art-template模板语法的引入及冲突解决方案

    使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便。没关系,这里我们使用art-template模板引擎,使用后可以直接使用html模板: 1、安装art-template npm install art-template 2、修改app.js文件,添加如···

    ThinkPHP中关联查询实例

    本文实例讲述了ThinkPHP中关联查询的用法。分享给大家供大家参考。具体分析如下: 在THINKPHP中关联查询(多表查询)可以使用 table() 方法或和join方法,如下示例所示: 1、table() 复制代码 代码如下:$list = $user->table('user_status stats, user_profile profile')->wh···

    ubuntu安装mysql数据库方法

    ubuntu基于linux的免费开源桌面PC操作系统,十分契合英特尔的超极本定位,支持x86、64位和ppc架构。一个比较流行的Linux操作系统,不仅简单易用,而且和Windows相容性非常好。那么在ubuntu中如何安装mysql数据库呢?   在ubuntu安装mysql主要有以下两种方式:   1.打开···

    ThinkPHP3.1新特性之多数据库操作更加完善

    通常情况下,如果一个应用只是操作同一个数据库(或者分布式数据库)的话,你只需要在项目配置文件中定义数据库连接信息即可。这里说的多数据库操作一般指的是在一个应用中会操作不同的数据库(包括同类型的和不同类型的数据库),甚至包括动态切换多数据库的情况。 对于早期版···

    检测是否已安装 .NET Framework 3.5的js脚本

    本主题提供一个以 HTML/JavaScript 编写的脚本,管理员可以使用该脚本来确定系统上是否存在 .NET Framework 3.5。复制代码 代码如下:<HTML> <HEAD> <TITLE>Test for the .NET Framework 3.5</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT···

    PHP二维数组实现去除重复项的方法【保留各个键值】

    本文实例讲述了PHP二维数组实现去除重复项的方法。分享给大家供大家参考,具体如下: 对于如下二维数组,要求对其进行去重: $arr = array( '0'=>array( 'name'=>'james', 'age'=>30, ), '1'=>array( 'name'=&···

    英文:A链接标记ie下会自动补全href

    英文:A链接标记ie下会自动补全href. Whilst working on the Ajax Link Tracker and MapSurface I have come across an inconsistency in how the href attribute is retrieved using DOM Scripting. The href attribute is different to other element attributes···

    JS 截取字符串substr 和 substring方法的区别

    substr 方法 返回一个从指定位置开始的指定长度的子字符串。 stringvar.substr(start [, length ]) 参数 stringvar 必选项。要提取子字符串的字符串文字或 String 对象。 start 必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。 length 可选项。在返···

    无需插件wordpress生成静态缓存文件的方法

    说起wordpress生成静态缓存的话首先想到的就是WP Super Cache插件,确实如此,大多数的wordpress站长们都在使用. 但是永远都有那些纠结完美派的人,不喜欢用插件的人也十分的多,而今天介绍的非插件搞定wordpress生成静态缓存文件方法,即可为大家去掉这款强大的wordpre···