在用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这个属性，而我要去简单的用第三方插件呢？
浏览器的兼容性肯定水平上妨碍了前端的倒退。同时也呈现了很多专门为解决这些兼容性的代替解决方案，
感激这些开源我的项目，感激这些开发者。