React daterangepicker – mobile friendly

Issue

I am using Ant Design in my React project but I can’t find a property for the daterangepicker in order to show the calendars in mobile friendly format. It will always show 2 months and the second month doesn’t fit the mobile screen. Is there a workaround? I tried to use react-dates component which has the numberOfMonths property but there is no time picker…

Solution

It’s possible to change the styles coming from the library. Use the exact names as you see them when reviewing in Chrome Dev Tools (the classes from library start with “ant”). In order to do so in your .less file add media queries covering the screens with maximum width of 480px. It’s enough to change the following 2 classes:

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

And your range picker will display months in column, so they fit small screens:

enter image description here

Answered By – Tania Shulga

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.