reactjs - React daterangepicker - 移动友好

标签 reactjs datepicker antd daterangepicker

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

最佳答案

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

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

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

enter image description here

关于reactjs - React daterangepicker - 移动友好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60091618/

相关文章:

javascript - Provider使用一次就够了吗?

c# - 当用户清除日期时,WPF Datepicker 文本不会根据绑定(bind)更改

android - Material 设计日期选择器 : How to popup datepicker when click on a Spinner

javascript - Antd提示框悬停后如何消失?

reactjs - 在 React 中的光标位置插入文本

reactjs - React - useState 的 setter 函数可以改变吗?

reactjs - react /Mocha 测试 : can't find imported components

java.time.DateTimeException : Unable to obtain LocalTime from TemporalAccessor: 2017-10-29 of type java. 时间.LocalDate

reactjs - 如何更改 ant.design InputNumber 的背景颜色?

reactjs - Ant设计响应式NavBar