日历插件bootstrap-datetimepicker的使用感悟
日历插件bootstrap-datetimepicker的参数使用
首先队长先综述一下插件的使用三步流程：即 1、引入插件 2、使用jquery选择器选择目标标签 3、对目标标签绑定插件函数来触发插件
雷同于python中的库的使用(安装库 导入库 引用库)
下面是个简单的Demo, bootstrap-datetimepicker的具体使用 还是根据官方提供的文档 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
<!DOCTYPE html>
<html >
<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="" >
<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位数