我正在使用 jQuery 插件datepicker来显示列内的内联日历元素,但日历被放置在页面的左上角,我不确定我做错了什么。
我附上了一张我在屏幕上看到的图片。红色框是我正在处理的两列,我试图在第一列的输入字段下方获取日期选择器。
var datepickerContainer = $('.datepicker-container');
$('.datepicker-input').datepicker({
autoPick: true,
inline: true,
container: datepickerContainer,
});
.datepicker-container {
border: 1px dashed #eee;
margin: 10px auto;
min-height: 160px;
position: relative;
display: block;
}
.control-module {
margin-top: 35px;
}
.activity-feed {
padding: 15px;
list-style: none;
}
.feed-module {
margin-top: 35px;
float: right;
border: 1px solid red;
}
.feed-positioning {
padding: 0 0 0 0!important;
}
/* Date headers */
.date {
width: 190px;
position: relative;
top: -5px;
color: #8c96a3c0;
font-size: 13px;
border-radius: 6px;
}
/* Messages */
.css-message {
font-size: 15px;
}
.activity-feed>.css-message {
position: relative;
margin-left: 20px;
padding-bottom: 20px;
padding-left: 40px;
border-left: 2px solid #e4e8ebf6;
}
.css-message:last-child {
border-color: transparent;
}
.css-message::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -6px;
width: 10px;
height: 10px;
border-radius: 6px;
background: #fff;
border: 1px solid #f37167;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<div class="row d-flex myclass justify-content-around">
<div class="p-2 control-module myclass">
<div class="input-group">
<input class="datepicker-input">
</div>
<div class="datepicker-container"></div>
<nav class="nav flex-column"></nav>
</div>
<div class="d-flex feed-module p-2">
<ol class="list-of-days">
<li class="list-group-item list-group-item-info date">
<h4>Date
<h4>
</li>
<ol class="activity-feed">
<li class="feed-item css-message">message</li>
</ol>
</ol>
</div>
</div>
您尝试使用的日期选择器似乎将它自己的 css 带到聚会上并将其放置在您选择的容器上:
.datepicker-container {
background-color: #fff;
direction: ltr;
font-size: 12px;
left: 0;
line-height: 30px;
position: fixed;
top: 0;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 210px;
z-index: -1;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
包括一些定位属性。
问题是它的 css 是在你自己的之后加载的,所以它优先。
好消息是你有几种方法可以修复它,你可以设法在你自己的 css 之前加载它,你可以为你自己的 css 制作一个更好的选择器来获得优先级,或者你可以使用!important
关键字覆盖任何你想要的属性。
也许还可以查看 datepicker 文档,看看是否有禁用它的选项。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句