首先队长先综述一下插件的使用三步流程:即 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

转载于:https://www.cnblogs.com/We612/p/10142894.html

日历插件bootstrap-datetimepicker的使用感悟相关推荐

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

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

  2. 年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...

    插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展 更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...

  3. Bootstrap全年日历插件带记事功能

    下载地址 实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:

  4. vue2.0 与 bootstrap datetimepicker的结合使用

    vue2.0 与 bootstrap datetimepicker的结合使用 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向 ...

  5. 我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的

    背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...

  6. 前端ui组件(1):日程排班—11个优秀JavaScript 日历插件

    日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...

  7. bootstrap datetimepicker 用法+demo案例下载

    bootstrap datetimepicker 用法+demo案例下载 官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...

  8. fullcalendar日历插件的使用并实现增删改查

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

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

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

  10. fullcalendar日历插件的使用并动态增删改查(转载)

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

最新文章

  1. springboot 热部署 idea版本(转)
  2. Exchannge 2013数据库副本频繁自动切换
  3. php5.4 session配置,Session
  4. linux搭建vsftp服务器_Linux配置VSFTP服务器的方法
  5. 关于索引我能说的那些事儿
  6. 算法科普:有趣的霍夫曼编码
  7. 你需要知道的基础算法知识——STL和基础数据结构(八)
  8. 说透Applet的数字签名之1——Applet及其运行
  9. 抽奖砍价之类以均值为基础的波动算法 demo版本
  10. 设计模式--适配器(Adapter)
  11. 拓端tecdat|数据预处理之异常值处理
  12. DBCS和UCS编码相关
  13. elasticsearch 匹配发音相同单词的方案
  14. 苹果cms vod.html,苹果cms
  15. 个人计算机显示器配置,怎么看电脑显示器配置
  16. css选择器权重排序_css选择器的权重计算
  17. Laravel56查询构建器中的increment和decrement用法
  18. itss认证条件是什么?
  19. 免费下载思科CCNP 642-861考试题库
  20. JUC学习(二):Lock的介绍及使用(实现多线程卖票)

热门文章

  1. pg注释某一段语句不执行_@Autowired的使用:推荐对构造函数进行注释
  2. 苏州大学计算机学院推免流程,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...
  3. python接口封装_Python 接口测试之接口关键字封装
  4. 电脑声音太小如何增强_如何录制电脑上播放的声音,背景音乐
  5. 华为新系统鸿蒙效果,19款华为手机内测新系统,流畅度比肩苹果iOS,优先体验鸿蒙OS...
  6. linux配置路径,Linux下配置搜索路径
  7. eclipse快捷键_Eclipse快捷键
  8. c ++比较字符串是否相等_在C ++中比较字符串的3种方法
  9. python 日期格式打印_Python打印格式
  10. java开发课程表_Java开发人员课程包,折扣高达86%