日历插件bootstrap-datetimepicker的使用感悟
首先队长先综述一下插件的使用三步流程:即 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的使用感悟相关推荐
- 日历插件:Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
- 年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展 更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...
- Bootstrap全年日历插件带记事功能
下载地址 实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:
- vue2.0 与 bootstrap datetimepicker的结合使用
vue2.0 与 bootstrap datetimepicker的结合使用 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向 ...
- 我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的
背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...
- 前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
- bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载 官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
- fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
最新文章
- springboot 热部署 idea版本(转)
- Exchannge 2013数据库副本频繁自动切换
- php5.4 session配置,Session
- linux搭建vsftp服务器_Linux配置VSFTP服务器的方法
- 关于索引我能说的那些事儿
- 算法科普:有趣的霍夫曼编码
- 你需要知道的基础算法知识——STL和基础数据结构(八)
- 说透Applet的数字签名之1——Applet及其运行
- 抽奖砍价之类以均值为基础的波动算法 demo版本
- 设计模式--适配器(Adapter)
- 拓端tecdat|数据预处理之异常值处理
- DBCS和UCS编码相关
- elasticsearch 匹配发音相同单词的方案
- 苹果cms vod.html,苹果cms
- 个人计算机显示器配置,怎么看电脑显示器配置
- css选择器权重排序_css选择器的权重计算
- Laravel56查询构建器中的increment和decrement用法
- itss认证条件是什么?
- 免费下载思科CCNP 642-861考试题库
- JUC学习(二):Lock的介绍及使用(实现多线程卖票)
热门文章
- pg注释某一段语句不执行_@Autowired的使用:推荐对构造函数进行注释
- 苏州大学计算机学院推免流程,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...
- python接口封装_Python 接口测试之接口关键字封装
- 电脑声音太小如何增强_如何录制电脑上播放的声音,背景音乐
- 华为新系统鸿蒙效果,19款华为手机内测新系统,流畅度比肩苹果iOS,优先体验鸿蒙OS...
- linux配置路径,Linux下配置搜索路径
- eclipse快捷键_Eclipse快捷键
- c ++比较字符串是否相等_在C ++中比较字符串的3种方法
- python 日期格式打印_Python打印格式
- java开发课程表_Java开发人员课程包,折扣高达86%