bootstrap3的datetimepicker选择器视图无法显示问题的解决 Vue_bootstrap-datetimepicker 事件选择框弹不出来-优快云博客

在前端开发中遇到bootstrap3的datetimepicker选择器视图无法显示的问题，经过排查和尝试，发现是Vue中v-show和v-if指令导致的渲染问题。将v-show替换为v-if后，datetimepicker正常工作。此解决方案适用于Vue项目中遇到类似问题的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个bug折腾了一天多，经过在网上经过了各种搜索都没用，最后还是自己解决的，虽然解决方法及其简单，还是记录下这个花了接近两天才解决的问题

要看解决方法直接跳到文末即可
本文仅为记录，只是分享自己遇到的奇葩问题，欢迎讨论
每个人遇到的问题可能不同，我认为我的情况算非常特殊的，还是需要自己调试，过程十分重要

过程

最近在前端开发过程中（五一期间还要工作惨兮兮。。。）用bootstrap的datetimepicker开发带日期时间选择的表单，但是选择器视图怎么点都出不来，就是下面这东西死活出不来
在这里插入图片描述

折腾的过程主要有下面几个阶段：

这种调用框架出现的问题第一反应肯定是引入的js css包有问题，参考了两篇博客：bootstrap datetimepicker 日期插件超详细使用方法
、前端之路：bootstrap 时间日期日历控件（datetimepicker），最后用后者的引入对后者开头提到的例子进行了复现（就是把HTML、jquery代码复制进一个HTML文件中，后面会贴完整代码），完美运行（其中moment-with-locales.js文件在BootCDN的网站
上可以找到cdn链接），但是同样的引入就是在我的项目中行不通。。。排除引入错误的问题
猜测是z-index属性的问题：因为网页各个模块都设置了覆盖关系，怀疑是被盖住了显示不出来，后来各种改css都没有任何用，而且上一条中复现的网页中好像也不存在z-index的设定，基本排除这一条
在第一条中提到的提一篇博客中写有通过js显示日期时间选择器的语句，调用后报错如下图

贴一下第一条中提到的完整复现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">
	 
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
	<div class="row">
	    <div class='col-sm-6'>
	        <div class="form-group">
	            <label>选择日期：</label>
	            <!--指定 date标记-->
	            <div class='input-group date' id='datetimepicker1'>
	                <input type='text' class="form-control" />
	                <span class="input-group-addon">
	                    <span class="glyphicon glyphicon-calendar"></span>
	                </span>
	            </div>
	        </div>
	    </div>
	    <div class='col-sm-6'>
	        <div class="form-group">
	            <label>选择日期+时间：</label>
	            <!--指定 date标记-->
	            <div class='input-group date' id='datetimepicker2'>
	                <input type='text' class="form-control" />
	                <span class="input-group-addon">
	                    <span class="glyphicon glyphicon-calendar"></span>
	                </span>
	            </div>
	        </div>
	    </div>
	</div>
</body>
<script>
	$(function () {
	    $('#datetimepicker1').datetimepicker({
	        format: 'YYYY-MM-DD',
	        locale: moment.locale('zh-cn')
	    });
	    $('#datetimepicker2').datetimepicker({
	        format: 'YYYY-MM-DD hh:mm',
	        locale: moment.locale('zh-cn')
    });
});
</html>

解决

这个带日期时间选择的表单所在的模块通过Vue切换不同div的显示以达到标签的效果，但是如果我把这一块表单移动大其他固定的模块上就可以正常工作
Vue中控制节点显示的指令有v-if和v-show，两者控制显示的方式不同，我的笔记Vue网课笔记（二）指令介绍中有详细介绍
我突发奇想把v-if换成了v-show，然后就成了！完美运行
我的猜测是v-if渲染时出现的问题，因为上面提到的报错中说该元素没有使用DateTimePicker，而v-show仅对节点的display属性进行修改。这只是我的猜想，我没有深究，欢迎讨论！