React daterangepicker - мобильный дружественный

Question

Я использую Ant Design в своем проекте React, но не могу найти свойство для daterangepicker , чтобы показывать календари в мобильном формате. Он всегда будет показывать 2 месяца, а второй месяц не умещается на экране мобильного телефона. Есть ли обходной путь? Я пытался использовать react-dates компонент, который имеет свойство numberOfMonths, но нет выбора времени ...

Answer 1

Можно изменить стили из библиотеки. Используйте точные имена, которые вы видите при просмотре в Chrome Dev Tools (классы из библиотеки начинаются с "ant"). Для этого в вашем файле .less добавьте медиазапросы, покрывающие экраны с максимальной шириной 480 пикселей. Достаточно изменить следующие 2 класса:

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

И ваш выбор диапазона будет отображать месяцы в столбце, поэтому они подходят для небольших экранов:

Answer 2

Вместо использования RangePicker, который всегда будет отображать 2 месяца, вы можете использовать 2 DatePicker с использованием свойства disabledDate.

См. https://codesandbox.io/s/oip3r