作者:傻丫丫69_678 | 来源:互联网 | 2022-12-16 19:15
我正在使用Angular uib datepicker,使用nocsss导入它,当我分页时,它会在调整大小之前简要显示两个日历.我已经尝试添加overflow: hidden
到table
日期选择器中,但这会导致整个日期选择器不可见.绿色方块是一个临时按钮,用于显示和隐藏日期选择器.为什么它与它并排是一个单独的问题.
![破碎的datepicker](https://img.php1.cn/3cd4a/1eebe/cd5/dc7ef30f57b727c7.jpeg)
我的scss:
.datepicker-container {
:global {
button:not(.uib-title) {
cursor: pointer;
}
.uib-datepicker {
//max-width: 238px;
//overflow: hidden; -> this makes the entire datepicker invisible
table {
margin: 0 auto;
}
}
.uib-right,
.uib-left {
height: 20px;
background: $some-blue;
}
.uib-title {
text-align: center;
width: 100%;
}
.uib-day {
padding: 0;
transition: all 200ms linear;
cursor: default;
button {
height: 24px;
width: 100%;
&:disabled {
color: $some-grey;
opacity: 0.75;
cursor: not-allowed;
}
&.active {
background: $some-blue;
border-radius: 50%;
color: white;
}
}
&:hover {
color: $white;
background: $some-blue;
}
}
.text-center {
text-align: center;
}
在调试时,我使用了chrome调试器来打破子树修改,当然,问题出现在日历的内部.它在下个月加载,然后删除前一个月的节点,这没有任何意义,但很好.这意味着,在短时间内,两个月都可见.所以,如果我这样做,它确实解决了一些问题:
td {
&:nth-of-type(8),
&:nth-of-type(9),
&:nth-of-type(10),
&:nth-of-type(11),
&:nth-of-type(12),
&:nth-of-type(13),
&:nth-of-type(14) {
display: none;
}
}
基本上td的1-7是下个月,8-14是前一个月,角度显示在移除之前.我们可以像这样隐藏它们,但这个解决方案很脆弱.如果您快速单击日历,它会像示例中一样闪烁和展开.