CODEWITHSUNDEEP
reactjsdatepickerantddaterangepicker
thelaw
thelaw

Reputation: 385

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...

Upvotes: 4

Views: 11538

Answers (7)

tolgakisin
tolgakisin

Reputation: 31

For responsive view, you should change the flex direction to column and add scroll.

CSS

    @media (max-width: 576px) {
      .ant-picker-panels {
        flex-direction: column;
        overflow-y: scroll;
        height: 400px;
      }
    }

View

Result

Upvotes: 1

Asim Ali
Asim Ali

Reputation: 41

For responsive view. You can use this css to show a single view with next-prev month buttons

.responsiveDateRange {
  @media (max-width: 768px) {
    &>div>div>div>div:last-child {
      width: 0;
      position: absolute;
      visibility: hidden;

      &>div>div:first-child {
        &>button:nth-last-child(2),
        &>button:nth-last-child(1) {
          visibility: visible;
        }
      }

      &>div>div:last-child {
        display: none;
      }
    }
  }
}

Upvotes: 0

samtax01
samtax01

Reputation: 952

To me, changing the flex-direction from the default(row) to column is the best way to go.

import { DatePicker } from "and";
import styled from "styled-components";

const RangeDatePicker = (props) => {
  <DatePicker.RangePicker
     panelRender={(panelNode) => (
         <StyledRangePickerContainer>{ panelNode }</StyledRangePickerContainer>
     )}
     {...props}
  />
}

CSS

const StyledRangePickerContainer = styled.div`
  @media (max-width: 576px) {
    .ant-picker-panels {
      flex-direction: column !important;
    }
  }
`;

Result

enter image description here

Upvotes: 1

Kevin R
Kevin R

Reputation: 61

SOLUTION 2021

I came up with this solution, and is to hide the second picker but always leaving the functionality of the following month.

Using styled-components and the panelRender property of the datePicker you can wrap the entire panel in a wrapper that allows you to edit the css classes in mobile and reset them on desktop.

if you don't use styled component feel free to edit the css globally or bind a div with a global class

const RangeDatePicker = (props) => {
  const panelRender = (panelNode) => (
    <StyleWrapperDatePicker>
      {panelNode}
    </StyleWrapperDatePicker>
  );

  return <DatePicker.RangePicker  panelRender={panelRender} {...props} />;
};

CSS

export const StyleWrapperDatePicker = styled.div`
  .ant-picker-panel {
    &:last-child {
      width: 0;
      .ant-picker-header {
        position: absolute;
        right: 0;
        .ant-picker-header-prev-btn, .ant-picker-header-view {
          visibility: hidden;
        }
      }

      .ant-picker-body {
        display: none;
      }

      @media (min-width: 768px) {
        width: 280px!important;
        .ant-picker-header {
          position: relative;
          .ant-picker-header-prev-btn, .ant-picker-header-view {
            visibility: initial;
          }
        }

        .ant-picker-body {
          display: block;
        }
      }
    }
  }
`;

Image

Upvotes: 6

Daniel Nguyen
Daniel Nguyen

Reputation: 137

You should change the flex direction to column when you are on mobile view

 @media(max-width: 576px) { 
  .ant-picker-panels { 
    flex-direction: column;
  } 
}

Upvotes: 5

Tania Shulga
Tania Shulga

Reputation: 228

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

Upvotes: 5

Draeken
Draeken

Reputation: 380

Instead of using a RangePicker which will always show 2 months, you could use 2 DatePicker with the use of disabledDate property.

See https://codesandbox.io/s/oip3r

Upvotes: 1

Related Questions