首先队长先综述一下插件的使用三步流程：即 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】使用angular搭建项目，获取dom元素

    方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="tes ...

  2. 9.1 oop习题集合

    [练习题]01.类的成员变量 猜数字游戏一个类A有一个成员变量v有一个初值100.定义一个类对A类的成员变量v进行猜.如果大了则提示大了小了则提示小了.等于则提示猜测成功. import j ...

  3. binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * binarySearch(int[] a,int ...

  4. OpenCV3编程入门笔记（一）

    ---恢复内容开始--- 图像处理技术一般包括图像压缩,增强和复原,匹配.描述和识别3个部分.图像处理和计算机视觉的区别在于:图像处理侧重于“处理”图像——如增强.还原.去噪.分割等:而计算机视觉重点 ...

  5. shell笔记-常用

    shell提取文件名: http://blog.csdn.net/u011544778/article/details/50773053 一.使用${} 1.${var##*/}该命令的作用是去掉变量 ...

  6. sublime text3 的汉化

    仅是记录自己的处理过程,以防遗忘: 感谢作者:https://www.jianshu.com/p/ecc241f22ed5

  7. Luogu P3703 [SDOI2017]树点涂色

    比较有趣的综合树上问题,刷LCT题单时做的但是发现后面LCT只是起了辅助作用233 首先我们分析每一个操作,\(1\)的定义就让我们联想到了access,我们回忆一下LCT的性质: LCT中每一个sp ...

  8. apt查找安装包

    1.查找名称含openblas的安装包 apt-cache search openblas

  9. JS中AOP的实现和运用

    在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调 ...

  10. COMCMS_CORE 起步篇，如何运行和部署

    前言:关于最近开源后,不少朋友问,怎么我下载下来,运行不了.或者怎么没有左边菜单.货不对板?还是我吃了数据? 感言:开源不容易,更不容易的是,明明毫无保留,还这么大误会,真是泪奔..... 好了.步入 ...