React daterangepicker-移动友好

Question

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

Answer 1

代替使用将始终显示2个月的RangePicker，可以将2 DatePicker与disabledDate属性一起使用。

请参见https://codesandbox.io/s/oip3r

Answer 2

可以更改库中的样式。在Chrome开发工具中查看时，请使用与您看到的名称相同的名称（库中的类以“ ant”开头）。为了做到这一点，在您的.less文件中，添加覆盖屏幕的媒体查询，最大宽度为480px。更改以下2个类就足够了：

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

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