Webpack重构后eonasdan-bootstrap-datetimepicker日历为空问题求助

我之前重构项目时也碰到过一模一样的情况！这种现象大概率是样式文件未正确引入或者依赖版本不兼容导致的——插件的交互逻辑正常运行，但UI渲染需要的CSS没加载，所以日历面板看起来是空的，下面给你几个排查和解决的方向：

1. 必须引入插件的CSS文件 #

这个datetimepicker的日历完全依赖自带的样式，Webpack打包时不会自动帮你引入CSS，得手动添加：
如果是用npm安装的eonasdan-bootstrap-datetimepicker，直接在Article_create.js里添加一行：

// 引入日历插件的样式
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');

或者用ES6的import语法：

import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css';

2. 检查Moment本地化是否完整加载 #

你设置了moment.locale('fr')，但Webpack的树摇功能可能会把未被直接引用的moment本地化文件删掉，导致法语本地化失效，也可能间接影响日历显示。可以手动引入法语locale文件：

var moment = require('moment');
// 手动引入法语本地化文件
require('moment/locale/fr');
moment.locale('fr');
window.moment = moment;

3. 确认Bootstrap版本兼容性 #

eonasdan-bootstrap-datetimepicker v4.x是基于Bootstrap 3开发的，如果你的项目里引入的是Bootstrap 4+版本，DOM结构和样式类的差异会导致日历面板显示异常。检查你的package.json里Bootstrap的版本，确保是3.x系列（比如bootstrap@3.3.7）。

我当时就是漏了引入CSS文件，加上之后日历立刻正常显示了，你可以先试第一个方案，应该能解决问题！

内容的提问来源于stack exchange，提问作者adamsafr