首先队长先综述一下插件的使用三步流程：即 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. 【vue】vue +element 搭建项目，要求既支持pc端又支持移动端

    使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...

  2. 关于tomcat启动报“this web application instance has been stopped already”的处理

      出现情况1            启动tomcat的时候,默认会启动这个“/tomcat/webapps/ROOT”路径下的tomcat自带的程序包,当启动这个路径下的程序包后,如果tomcat扫 ...

  3. 支持“xxxContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库

    将项目的数据库连接用户及密码修改后(切换用户,用户名与原来不一样,用户下对象结构一致),报以下错误: 支持“XXXDBContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code Fir ...

  4. 建一个网站python

    域名()+  服务器+ 源码 制作一个自己的网站.................

  5. Spring_AOP 记录系统关键操作日志用法

    问题: 系统需要记录用户的关键操作日志,以便后期的系统维护,方便的查看问题,及时排除 分析: (1)保存字段:作为一个日志记录功能,首先数据库新建一张表保存用户的操作关键字段, 用户名,ip,操作描述 ...

  6. [C#] LINQ之LookUp

    声明:本文为www.cnc6.cn原创,转载时请注明出处,谢谢! 本文作者文采欠佳,文字表达等方面不是很好,但实际的代码例子是非常实用的,请作参考. 一.先准备要使用的类: 1.Person类: cl ...

  7. 升级MySQL5.7，开发不得不注意的坑

    前段时间,将线上MySQL数据库升级到了5.7.考虑到可能产生的不兼容性,在升级之前,确实也是战战兢兢,虽然测试环境,开发环境早在半年前就已提前升级. 基于前期的调研和朋友的反馈,与开发相关的主要有两 ...

  8. win2016 配置IIS 和mysql5.7 迁移数据表的两个小坑

    今天配置一整天,就IIS都装了一整天,都是没办法安装.net3.5的问题. 最后解决办法:https://help.aliyun.com/knowledge_detail/38203.html?spm ...

  9. python实战案例--银行系统

    stay hungry, stay foolish.求知若饥,虚心若愚. 今天和大家分享一个python的实战案例,很多人在学习过程中都希望通过一些案例来试一下,也给自己一点动力.那么下面介绍一下这次 ...

  10. Go+Python双剑合璧

    目的 Python调用Go的方法,Python有很多功能强悍又使用简洁的库.而新生军Go的多核心利用率也是非常强悍的.当然这是明面上的优点.反正你有很多理由想要让Python能够调用Go的方法. 实验 ...