是否可以为“ React Date Cicker”的过去和未来定型?
我正在使用React Date Picker来构建自定义日期,但我似乎无法设置过去的日期。所有日期都低于当前日期。现在的日期应该具有过去的背景,未来的日期都应具有黑色边框的白色背景;
我已经写了为覆盖当前样式的代码,但我似乎无法弄清楚这一点
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;
Code I have written to override current styles but I cant seem to figure this out
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论