React botstrap 日期選擇器 - 自定義

Question

我正在嘗試通過以下方式react-bootstrap-daterangepicker定義react-bootstrap-daterangepicker ：

I want to use different background colors for state when the dates in range are selected and when the user is only hovering to select the dates.

在下面顯示的屏幕截圖中，您可以看到我將鼠標懸停在日期上，所選范圍的日期是淺藍色。

相同的背景顏色是當我實際選擇所需范圍時，唯一的區別是范圍內最后一天的背景顏色：

有沒有辦法為上述兩種狀態制作不同的背景顏色？ 問題在於，在這兩個州中，范圍內的天數具有相同的類別：

.in-range

任何幫助表示贊賞！

Answer 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;
}

這是一個演示和源代碼。

Answer 2

觀看此示例時，我看到范圍內第一天的類.start-date和范圍內最后一天的.end-date 。 可以嘗試操作這些類。