关于javascript:bootstrap4中datetimepicker的使用与避坑

在用 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 这个属性，而我要去简单的用第三方插件呢？

浏览器的兼容性肯定水平上妨碍了前端的倒退。同时也呈现了很多专门为解决这些兼容性的代替解决方案，

感激这些开源我的项目，感激这些开发者。