首先队长先综述一下插件的使用三步流程：即 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 搭建项目，Qs用途

    1.安装 (c)npm install qs -S 2.用途 在 axios中,利用QS包装data数据 3.常见用法: import Qs from 'qs'; Qs.stringify(data) ...

  2. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  3. zabbix API应用

    1.模拟登录 curl -i -X POST -H 'Content-Type:application/json' -d '{"jsonrpc":"2.0",& ...

  4. 简述DDOS攻击的工作原理

    1.DDOS攻击:大量的肉鸡对服务器的不同端口发送巨型流量的UDP报文,无法通关关闭端口的方式来进行隔离,破坏力极强,严重会造成服务器当机. SYN/ACK Flood攻击:经典最有效的DDOS方法. ...

  5. notpad++常用操作与快捷键

    1.列编辑模式 按住alt+shift进入列编辑模式

  6. （1）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- 什么是微服务架构，.netCore微服务选型

    开发工具:VS2017 .Net Core 2.1 什么是微服务?单体结构: 缺点: 1)只能采用同一种技术,很难用不同的语言或者语言不同版本开发不同模块: 2)系统耦合性强,一旦其中一个模块有问题, ...

  7. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

  8. ReactJs移动端兼容问题汇总

    汽车H5使用ReactJs问题汇总 Q:安卓4.4webview显示空白? A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is und ...

  9. 跨语言调用Hangfire定时作业服务

    跨语言调用Hangfire定时作业服务 背景 Hangfire允许您以非常简单但可靠的方式执行后台定时任务的工作.内置对任务的可视化操作.非常方便. 但令人遗憾的是普遍都是业务代码和hagnfire服 ...

  10. Python入门-Hello Word

    1.python语言介绍 Python创始人:Guido Van Rossum 2.python是一种解释型.动态类型计算机程序设计语言. 解释型:程序无需编译成二进制代码,而是在执行时对语句一条一条 ...