gpt4 book ai didi

jquery - Bootstrap 日期时间选择器样式未正确应用

转载 作者:技术小花猫 更新时间:2023-10-29 10:17:05 25 4
gpt4 key购买 nike

我在使这个 Bootstrap datetimepicker 工作时遇到了一些麻烦:

http://eonasdan.github.io/bootstrap-datetimepicker/

我做了一个非常基本的页面,这是代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
$('#datetimepicker1').datetimepicker();
});
</script>
</head>

<body>
<div class='col-sm-2'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

</body>
</html>

现在,这不是插件不起作用,更像是一些样式没有正确应用。这是一张图片,可以更好地说明我的意思。左边是我有的,右边是我真正想要的:

datepicker comparison

如您所见,所有内容都左对齐而不是居中,并且内容更窄。此外,当我将鼠标悬停在日历上并且没有正确勾勒出当前日期时,没有悬停效果。谁能告诉我我做错了什么?

最佳答案

从您的屏幕截图来看,您似乎没有引入 bootstrap-datetimepicker.css 库。查看您的控制台并确保您没有任何错误并且该库存在于它要查找的文件夹中并且具有所有适当的内容。

如果没有额外的 css,它不会看起来糟糕,因为 bootstrap 完成了大部分繁重的工作,而插件通常只是利用 Bootstrap 的类并添加一些自己的类来打包它上。

demo

图书馆 - 工作

$(function() {
$('#datetimepicker1').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

没有 库 - 损坏

$(function() {
$('#datetimepicker1').datetimepicker();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

P.S. - It's hard to debug since we have no way of knowing what the files look like in your local /js/ folder. In the future, I would suggest using CDN's for online samples so it's easier to share what you're looking at with others. You can grab distributable static files with cdnjs here:

关于jquery - Bootstrap 日期时间选择器样式未正确应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29371227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com