reactjs - React daterangepicker - 移动友好

Question

我在我的 React 项目中使用 Ant Design，但我找不到daterangepicker的属性，以便以移动友好的格式显示日历。它总是显示2个月，第二个月不适合手机屏幕。有解决方法吗？我尝试使用react-dates具有该numberOfMonths属性但没有时间选择器的组件...

标签： reactjsdatepickerantddaterangepicker

Answer 1

可以更改来自库的样式。使用您在 Chrome 开发工具中查看时看到的确切名称（库中的类以“ant”开头）。为了在您的 .less 文件中执行此操作，请添加覆盖屏幕的媒体查询，最大宽度为 480 像素。更改以下 2 个类就足够了：

@media (max-width: 480px) {
    .ant-calendar-range {
        width: 320px;
    }
    .ant-calendar-range-part {
        width: 100%;
    }
}

您的范围选择器将在列中显示月份，因此它们适合小屏幕：