[英]React Date Range Picker
I have a project am creating and I want to have a react-date-range calendar in the project.我有一个正在创建的项目,我想在项目中有一个 react-date-range 日历。 Problem is when displaying the calendar the dates are not aligned with the days.
问题是显示日历时日期与日期不一致。 How can I[enter image description here align them properly.
我如何[在此处输入图像描述正确对齐它们。
Calendar days and dates not aligned properly日历日和日期未正确对齐
react-date-range can be installed with npm
, by the following command: react-date-range 可以通过以下命令与
npm
一起安装:
npm install react-date-range
First, styles and theme file must be imported:首先,必须导入样式和主题文件:
import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file
Then, import one of the 4 standalone components: DateRange
, DateRangePicker
, Calendar
, DefinedRange
然后,导入 4 个独立组件之一:
DateRange
、 DateRangePicker
、 Calendar
、 DefinedRange
The best way is to follow documentation最好的方法是遵循文档
make sure that you have the css imports in your code确保你的代码中有 css 导入
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
Consider including this style;考虑包括这种风格; from what I recall, it's effective:
据我所知,它是有效的:
.react-datepicker__time-container .react-datepicker__time
.react-datepicker__time-box ul.react-datepicker__time-list {
padding: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.