首先队长先综述一下插件的使用三步流程：即 1、引入插件  2、使用jquery选择器选择目标标签  3、对目标标签绑定插件函数来触发插件

雷同于python中的库的使用(安装库 导入库 引用库)
下面是个简单的Demo,  bootstrap-datetimepicker的具体使用 还是根据官方提供的文档 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Meta, title, CSS, favicons, etc. -->

    <meta charset="utf-8">

      <script src="https://blog-static.cnblogs.com/files/We612/bootstrap-datetimepicker.zh-CN.js"></script>
     <script src="https://blog-static.cnblogs.com/files/We612/bootstrap-datetimepicker.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

      </head>

  <body class="nav-md">

     <input class="calendar" value="" id="rz1">

    <script>

 $(function () {        
    $(".calendar").datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii',//显示格式
        todayHighlight: 1,//今天高亮
        minView: 0,//设置显示到分钟
        startView: 2,
        weekStart: 1,
        forceParse: 0,
        showMeridian: 1,
        autoclose: 1,
        });
})

    </script>

  </body>

</html>

这里说明一下几个易混常用参数：

　　minView  默认值：0，'小时'  就是说我们可以选择到小时下的分钟 比如2018-12-20 12:05

　　minView: "month",  规定我们能够选择到某月某日  比如2018-12-20

　　todayHighlight   布尔。默认值：false  如果为true，高亮当前日期。

　　language   默认值：'en'

　　minuteStep   数。默认值：5   此数值被当做步进值用于构建小时视图。每个对于minuteStep都会生成一组预设时间（分钟）用于选择。

　　autoclose:  布尔。默认值：false   当选择一个日期之后是否立即关闭此日期时间选择器

　　startView  数字，字符串。默认值：2，'月'   日期时间选择器打开之后首先显示的视图。可接受的值：

  • 小时视图的0或'小时'
  • 日视图的1或'天'
  • 月视图的2或'月'（默认值）
  • 12个月概述的3年或“年”
  • 10年概述的4年或“十年”。适用于出生日期datetimepickers。

　　weekStart  整数。默认值：0   一周从哪一天开始0.0（星期日）到6（星期六）

　　format  输出的时间格式   默认值：'mm / dd / yyyy'  还可以如下格式：　　　　

　　

日期格式，p，P，h，hh，i，ii，s，ss，d，dd，m，mm，M，MM，yy，yyyy的任意组合。

  • p：小写子句（'am'或'pm'） - 根据语言环境文件
  • P：大写的子午线（'AM'或'PM'） - 根据语言环境文件
  • s：没有前导零的秒数
  • ss：秒，带前导零的2位数
  • 我：没有领先零的分钟
  • ii：分钟，带前导零的2位数
  • h：小时没有前导零 - 24小时格式
  • hh：小时，带有前导零的2位数 - 24小时格式
  • H：没有前导零的小时 - 12小时格式
  • HH：小时，带有前导零的2位数 - 12小时格式
  • d：没有前导零的月中的某天
  • dd：每月的某天，前导零的2位数
  • m：没有前导零的月份的数字表示
  • mm：月份的数字表示，带前导零的2位数
  • M：一个月的短文本表示，三个字母
  • MM：一个月的全文表示，例如1月或3月
  • yy：一年的两位数表示
  • yyyy：一年的完整数字表示，4位数

官方文档 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

日历插件bootstrap-datetimepicker的使用感悟的更多相关文章

  1. 日历插件：Bootstrap的datetimepicker插件

    注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...

  2. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  3. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  4. Bootstrap日期/日历插件Datepicker 时间加标记

    由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...

  5. 日历插件FullCalendar应用：(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  6. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  7. fullcalendar日历插件的使用并动态增删改查

    我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

  8. php使用fullcalendar日历插件

    最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> < ...

  9. bootstrap-year-calendar全年日历插件

    使用方法使用bootstrap-year-calendar插件需要引入jQuery.Bootstap3的相关依赖文件和插件本身需要的js和css文件. <link rel="style ...

  10. bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式

    不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...

随机推荐

  1. docker 13 dockerfile的保留字指令

    Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本. 构建三步骤:1.编写dockerfile文件:2.docker build:3.docker run doc ...

  2. String，StringBuffer，StringBuilder的区别与共同点

    1. String与StringBuffer,StringBuilder的区别: String为什么不可变:String存储数据是有final修饰的字符数组private final char val ...

  3. mysql存储引擎之MyISAM 和 InnoDB的比较

    一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...

  4. Nodejs mongoose 详解

    前言 Mongoose 是在nodejs环境下,对mongodb进行便捷操作的对象模型工具.本文介绍解(翻)密(译)Mongoose插件. Schema 开始我们就要讲到Schema,一个Schema ...

  5. nginx 动态添加ssl模块

    一.查看nginx模块 /usr/local/nginx/sbin/nginx -V 二.安装openssl包 yum -y install pcre  pcre-devel zlib  zlib-d ...

  6. Centos7安装Tomcat8

    一.下载Tomcat8压缩包 打开tomcat8的下载页面 http://tomcat.apache.org/download-80.cgi 二.解压以及重命名 [root@localhost ~]# ...

  7. es6在网页中模块引入的方法

    前言: 以前,当然包括现在的大部分js引入,我们都是利用<script></script>这种全局的方式进行引入,当然这种弊端还是用的,比如这样直接利用script引入的话,会 ...

  8. Django lazy load 懒加载 倒序查询

    Django orm默认懒加载   Django orm默认使用的懒加载,即使用的时候才去访问数据库,且每次默认取最少的数据,当然这样有好处也有坏处... 坏处: 会导致频繁的查询数据库,如涉及到外键 ...

  9. Socket编程，SocketServer模块

    一.SocketServer的几种类型 面向远程: TCP 协议链接:socketserver.TCPServer(server_address, RequestHandlerClass, bind_ ...

  10. pycharm设置pytest运行程序