React bootstrap datepicker - 自定义

Posted 2023-02-22

【中文标题】React bootstrap datepicker - 自定义

【英文标题】：React botstrap date picker - customization

【发布时间】：2019-12-13 02:33:06

【问题描述】：

我正在尝试通过以下方式自定义react-bootstrap-daterangepicker：

我想在选择范围内的日期时使用不同的背景颜色，并且当用户只在悬停以选择日期时。

在下面显示的屏幕截图中，您可以看到当我将鼠标悬停在日期上时，所选范围天为浅蓝色。

相同的背景颜色是当我实际选择所需的范围时，唯一的区别是范围内最后一天的背景颜色：

有没有办法为上述两种状态制作不同的背景颜色？ 问题在于，在这两个州，范围内的日期都有相同的类别：

.in-range

感谢任何帮助！

【参考方案1】：

您可以像这样自定义开始和结束日期的背景颜色：

/* Start Date */
.daterangepicker td.start-date,
.daterangepicker td.start-date.active 
    background-color: #dc3545;


/* End Date */
.daterangepicker td.end-date,
.daterangepicker td.end-date.active 
    background-color: #dc3545;


/* Today (Initial Color) */
.daterangepicker td.today.active 
    background-color: #28a745;

这是demo 和source code。

【讨论】：

感谢您的回答和演示代码，但我的问题有点不同，我想在用户选择时为范围内的天设置两种不同的背景颜色（选择第一天并且用户悬停在结束日期，但不点击它）和选择范围时的不同背景。

【参考方案2】：

观看此example 我看到.start-date 范围内的第一天和.end-date 范围内的最后一天。您可以尝试操作这些类。