reactjsdatepickerantddaterangepicker

React daterangepicker - mobile friendly

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