bootstrap4中datetimepicker的使用与避坑

Posted 2021-09-25 akazwz

在用iframe导入grafana的时候，发现grafana自带的菜单栏是英文的而且不美观，在share的链接后面加上&kiosk是可以不显示这些菜单栏的，这样的话需要自己写选择的时间范围，本来input是有datetime-local这个属性的，可以直接用，但是兼容性太差，所以就用了这个datetimepicker，中间遇到了问题，在这记录分享一下。

一.下载datetimepicker

1.链接：bootstrap-datetimepicker

这个里面是文档，也有zip下载链接，下载了zip后，只需要js和css里面的

bootstrap-datetimepicker.min js css 加 bootstrap-datetimepicker.zh-CN就可以了，最后这个文件是本地化的。

2.依赖：

依赖有

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="{{ asset(\'css/bootstrap-datetimepicker.min.css\') }}" rel="stylesheet">
<script src="{{ asset(\'/js/bootstrap-datetimepicker.min.js\') }}" ></script>
<script src="{{ asset(\'/js/bootstrap-datetimepicker.zh-CN.js\') }}" ></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">

我用了这些就可以正常使用，其实是不需要font-awesome的，但是bootstrap4会有图标不显示的问题。

---

二.使用和配置

1.快速使用

html标签：

<label for="fromDate">请选择开始日期</label>
 <input name="fromDate" id="fromDate" type="text"  class="daterangepicker"/>

js:

$(".daterangepicker").datetimepicker();

这样，最基本的使用就可以了，但是实际使用肯定会进行配置的

2.配置

js:

$(".daterangepicker").datetimepicker({
 fontAwesome:\'font-awesome\', //解决图标缺失问题，直接用font-awesome代替
 forceParse: 0, //设置为0，时间不会跳转1899，会显示当前时间。
 language: \'zh-CN\', //显示中文
 format: \'yyyy-mm-dd hh:ii\', //日期格式化
 weekStart: 1, //每周的第一天是
 initialDate: new Date(), //初始化当前日期
 endDate: new Date(), //结束日期，后面的不可选
 });

还要更多详细具体的配置可以看：bootstrap-datetimepicker

---

总结与感想：

使用之前我就在想，为什么input有datetime-local这个属性，而我要去复杂的用第三方插件呢？

浏览器的兼容性一定程度上阻碍了前端的发展。同时也出现了很多专门为解决这些兼容性的替代解决方案，

感谢这些开源项目，感谢这些开发者。