反应日期范围选择器

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