是否可以为“ React Date Cicker”的过去和未来定型?

发布于 2025-01-27 11:45:02 字数 1715 浏览 4 评论 0原文

我正在使用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文