首先队长先综述一下插件的使用三步流程：即 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. 【angularjs】使用ionic+angular 搭建移动端项目，字体适配

    解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了 ...

  2. windows解决访问github慢问题

    ·1.更改host文件 文件地址: C:\Windows\System32\Drivers\etc ​ 如果不能直接修改,可拷贝到桌面修改后再复制回去 2.在host文件追加 ​ #github 19 ...

  3. 最长上升子序列（LIS）

    (我先扯些没用的) 我这个笨孩子 学点东西好慢好慢的 我还贪玩 于是 将自己陷入了一个超级超级超级差的境地 可 我还傻乎乎的保有着天真的梦想(理想?) 所以现在我要加倍的努力努力再努力了 只能嘎油了 ...

  4. jquery.$.ajax简单的使用

    function LoadWFS() { var viewer = new Cesium.Viewer('cesiumContainer'); $.ajax({ url: "http://l ...

  5. 从零开始搭建django前后端分离项目 系列一（技术选型）

    前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...

  6. 还是要习惯在linux环境下作Java开发

    要FQ 怎么在ubuntu上安装jdk 网址: https://www.youtube.com/watch?v=NZB3Iy7Lve4 需要网站:http://p.web.umkc.edu/pv6xc ...

  7. ML.NET 示例：推荐之场感知分解机

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  8. WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）

    1.简介 上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干: 首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单 ...

  9. list tuple

    ----------------------------善始者善终,笑到最后的,才是最good的.--------------------------------------------------- ...

  10. Spring基于AspectJ的AOP的开发——注解

    源码:https://gitee.com/kszsa/dchart 一, AspectJ的概述: AspectJ是一个面向切面的框架,它扩展了Java语言.AspectJ定义了AOP语法所以它有一个专 ...