反應日期范圍選擇器

Question

我有一個正在創建的項目，我想在項目中有一個 react-date-range 日歷。 問題是顯示日歷時日期與日期不一致。 我如何[在此處輸入圖像描述正確對齊它們。

日歷圖像

日歷日和日期未正確對齊

Answer 1

react-date-range 可以通過以下命令與npm一起安裝：

npm install react-date-range

首先，必須導入樣式和主題文件：

import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file

然后，導入 4 個獨立組件之一： DateRange 、 DateRangePicker 、 Calendar 、 DefinedRange

最好的方法是遵循文檔

Answer 2

確保你的代碼中有 css 導入

import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css'; 

Answer 3

考慮包括這種風格； 據我所知，它是有效的：

.react-datepicker__time-container   .react-datepicker__time  
.react-datepicker__time-box   ul.react-datepicker__time-list {  
     padding: 0; 
}