bootstrap-datetimepicker 使用教程

bootstrap-datetimepicker 使用教程

bootstrap-datetimepicker是bootstrap的一款日期时间选择器
官方文档地址：http://www.bootcss.com/p/bootstrap-datetimepicker/
bootstrap-datetimepicker 在网上虽然有很多教程，但很多都是无效的，所以写下了这篇文章

---

1. 引入css和js

<!-- bootstrap样式表 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 时间选择器样式表 -->
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">


<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- bootstrap脚本 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 时间选择器前置脚本 -->
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>

<!-- 时间选择器核心脚本 -->
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

• jquery版本：可选用 1.8.3 到 3.3.1
• bootstrap版本：选用v3的，使用v4，样式会不出来，v2未试

2. 前端代码

<div class="col-sm-6">
    <input type="text" id="datetime" />
</div>

• 控制器的外层，需要有一个相对定位的标签，否则会报错
  

3. js配置

<script>
    $("#datetime").datetimepicker();
</script>

4. 扩展

4.1 修改时间显示格式

<script>
    $("#datetime").datetimepicker({
        format: 'YYYY-MM-DD HH:mm'
    });
</script>

格式字符串	说明	示例
d	星期几	4
dd	星期几	Th
ddd	三个字符的星期几缩写	Thu
dddd	完整的星期几名称	Thursday
D	一位数或两位数的天数	4
DD	两位数的天数	04
h	12 小时格式的一位数或两位数小时数	1
hh	12 小时格式的两位数小时数 0	01
H	24 小时格式的一位数或两位数小时数	13
HH	24 小时格式的两位数小时数	13
m	一位数或两位数分钟值	4
mm	两位数分钟值	04
M	一位数或两位数月份值	9
MM	两位数月份值	09
MMM	三个字符的月份缩写	Sep
MMMM	完整的月份名	September
s	一位数或两位数秒数	1
ss	两位数秒数	01
Y	完整的年份	2018
YY	年份的最后两位数	18
YYYY	完整的年份	2018

4.2 中文

<script>
    $("#datetime").datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        locale: moment.locale('zh-CN')
    });
</script>

4.3 其他

<script>
    $("#datetime").datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        locale: moment.locale('zh-CN'),
        minDate: false, // 最小日期，如'2018/08/15'，则14号及14号前的日期都不可选
        maxDate: false, // 最大日期，同'minDate'
    });
</script>

5. 下载

https://github.com/kosmos1991/datetimepicker