问题描述
So basically I've done my best to style the datepicker for my project.
有人可以帮忙解决这个问题吗?感谢您提供任何形式的帮助。
这是我的样式表。
.wpm-datepicker {
font-weight: 600;
Box-shadow: none;
background-color: transparent;
font-family: "Inter",sans-serif;
width: 100%;
.bs-datepicker-multiple {
margin: 0 0 10px;
border-radius: 8px;
Box-shadow: $color-light-blue-grey 0 6px 13px;
flex-basis: 50%;
&:first-of-type {
margin-right: 20px;
}
&:nth-of-type(2) {
margin-left: 20px;
}
}
.bs-datepicker-container {
padding: 0;
width: 100%;
}
.bs-datepicker-head {
background-color: #0f2332 !important;
border-radius: 8px 8px 0 0;
padding: 17px 10px;
height: auto;
&::after {
content: unset;
}
button:nth-of-type(1) span,button:nth-of-type(4) span {
color: transparent;
left: -12px;
top: 10.5px;
display: inline-block;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 1px;
}
button:nth-of-type(1) span {
transform: rotate(135deg);
}
button:nth-of-type(4) span {
transform: rotate(-45deg);
}
}
.bs-datepicker-body {
border-radius: 0 0 8px 8px;
border: 0.1px solid #e5e5e5;
padding: 19px;
table th {
color: #970202 !important;
font-weight: 600;
text-transform: uppercase;
padding: 14px 0;
}
table th:first-of-type,table td:first-of-type {
display: none;
}
table td {
color: #0f2332 !important;
}
table td span .is-other-month {
color: #aab9c3 !important;
}
table.days span {
line-height: 31px;
font-size: 14px;
}
table.days span.in-range:not(.select-start)::before {
background: #ffcaca !important;
right: 19px;
height: 24px;
top: 4px;
}
table td::before,table td span::before {
left: -20px !important;
}
table td span.selected,table td.selected span,table td span[class*="select-"]::after,table td[class*="select-"] span::after,table td.is-highlighted:not(.disabled):not(.selected) span,table td span.is-highlighted:not(.disabled):not(.selected) {
background-color: #ffcaca;
width: 24px;
height: 24px;
line-height: 24px;
}
table td span.is-other-month,table td.is-other-month span {
background-color: transparent !important;
}
table td span.selected,table td[class*="select-"] span::after {
background: #e60000 !important;
}
table td:nth-of-type(2) span::before {
border-radius: 16px 0 0 16px;
left: 8px !important;
}
table td:nth-of-type(8) span::before {
border-radius: 0 16px 16px 0;
right: 4px !important;
}
table td:nth-of-type(8) span.select-end::before {
right: 10px !important;
}
table.days span.in-range.select-end::before {
right: 20px;
}
}
bs-days-calendar-view {
&:nth-of-type(1) bs-datepicker-navigation-view {
display: flex;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(1) {
padding-left: 24px;
padding-right: 10px;
}
&:nth-of-type(1) span {
bottom: 2px;
}
&:nth-of-type(3) {
padding: 0;
}
}
}
&:nth-of-type(2) bs-datepicker-navigation-view {
display: flex;
justify-content: flex-end;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(3) {
padding: 0;
}
&:nth-of-type(4) {
padding-left: 30px;
padding-right: 10px;
}
&:nth-of-type(4) span {
bottom: 2px;
}
}
}
}
}
我的组件有这个用于 bsConfig
this.bsConfig = {
containerClass: "wpm-datepicker",};
这就是我的标记方式。
<bs-daterangepicker-inline
[bsConfig]="bsConfig"
[bsValue]="bsRangeValue"
></bs-daterangepicker-inline>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)