change width of daterangepicker in react-dates

Question

I am using a react-dates package from Airbnb in one of my projects.i want to increase the calender width. By Default width is 618px. i can't able to write custom css because the width is applied inline style only and there is no class also.

I tried to write custom style but not able to do it. this my daterangepicker component code

import React, { useState } from 'react';
import 'react-dates/initialize';
import { DateRangePicker, FocusedInputShape } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
import moment from 'moment';
import './style.css';
type PropsType = {
  focusedInput: FocusedInputShape;
  startDate: any;
  endDate: any;
  setCheckIn: (e: any) => void;
  setCheckOut: (e: any) => void;
  setActiveTab: (e: any) => void;
  setFocusedInput: (e: any) => void;
};
const CheckInCheckOutDateRange = ({
  setCheckIn,
  setCheckOut,
  setActiveTab,
  startDate,
  endDate,
  setFocusedInput,
  focusedInput,
}: PropsType) => {
  const handleDatesChange = ({ startDate, endDate }) => {
    console.log(startDate);

    setCheckIn(startDate);
    setCheckOut(endDate);
    if (startDate) setActiveTab(3);
    if (endDate) setActiveTab(4);
    // setDateRange({ startDate, endDate });
  };
  const onFocusChange = (inputType: FocusedInputShape) => {
    setFocusedInput(inputType);
  };

  return (
    <div className='absolute top-[100%] h-full w-[55rem]'>
      <DateRangePicker
        startDate={startDate}
        startDateId='your_unique_start_date_id'
        endDate={endDate}
        endDateId='your_unique_end_date_id'
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={onFocusChange}
        weekDayFormat='ddd'
      />
    </div>
  );
};

export default CheckInCheckOutDateRange;

.DateInput_input {
  pointer-events: none;
}
.DateInput {
  display: none;
}
.DateRangePickerInput_arrow {
  display: none;
}
.DateRangePicker,
.DateRangePickerInput {
  width: 100% !important;
  height: 100% !important;
}
.DateRangePickerInput__withBorder {
  border: none !important;
  background-color: #ff28000d !important;
}
.CalendarDay__selected {
  background: #ff2800;
  border: 1px double #ff2800;
  /* border-top-left-radius: 19%;
    border-bottom-left-radius: 19%; */
}

.CalendarDay__selected_span {
  background: #ff280021 !important;
  color: black;
}

.CalendarDay__default {
  border: none;
}

.CalendarDay:hover {
  background-color: #ff2800;
  border: none;
  color: black;
}

.CalendarMonth_caption {
  font-size: 1rem !important;
  font-style: normal !important;
  line-height: 130% !important;
  letter-spacing: -0.01325rem !important;
  margin-top: 1.27rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.DayPickerNavigation_button__horizontalDefault {
  /* display: none; */
  margin-top: 0.5rem;
}

.DayPickerNavigation_button__horizontalDefault {
  margin-top: 1rem;
}

.DayPicker_transitionContainer {
  height: 20rem !important;
  padding-bottom: 1.91rem !important;
}

.CalendarMonth_table {
  margin-top: 2.16rem;
}

.DayPicker_weekHeader {
  margin-bottom: 1.61rem;
  top: 4rem !important;
}

.CalendarDay__hovered_span {
  background-color: #ff280021;
  border: none;
  color: black;
}

.DayPicker_weekHeader {
  top: 45px;
}

.CalendarMonthGrid__horizontal {
  top: 14px;
}

.DayPickerKeyboardShortcuts_buttonReset {
  display: none;
}

.DayPicker__withBorder {
  border-radius: 0.55163rem;
}

.DayPickerNavigation_svg__horizontal {
  fill: black;
}

.DayPickerNavigation_button__horizontalDefault {
  top: 13.5px;
}

.DayPickerNavigation_button__default {
  border: none;
}

.DayPicker_weekHeader_ul {
  content: 'Sun' 'Mon' 'Tue' 'Wed' 'Thu' 'Fri' 'Sat';
}

.thick-line {
  height: 0.0625rem;
  background-color: #d6cfcf;
}

.DayPicker-Day--blocked {
  background-color: #f5f5f5; /* Adjust as needed */
  cursor: default; /* Prevent selection */
}
/* display: none;
  } */

.DateRangePickerInput_arrow {
  display: none;
}

.CalendarDay__selected {
  background: #ff2800;
  border: 1px double #ff2800;
  /* border-top-left-radius: 19%;
    border-bottom-left-radius: 19%; */
}

.CalendarDay__selected_span {
  background: #ff280021 !important;
  color: black;
}

.CalendarDay__default {
  border: none;
}
.CalendarDay {
  width: 60px !important;
}
.DayPicker_weekHeader_li {
  width: 60px !important;
}
.CalendarDay__default {
  border: none;
}
.DayPicker{
  width: 100% !important;
}
.DateRangePicker_picker{
  width: 100% !important;
}
/* .DayPicker_focusRegion{
  width: 100% !important;
} */
.CalendarDay:hover {
  background-color: #ff2800;
  border: none;
  color: black;
}

.CalendarMonth_caption {
  font-size: 1rem !important;
  font-style: normal !important;
  line-height: 130% !important;
  letter-spacing: -0.01325rem !important;
  margin-top: 1.27rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.DayPickerNavigation_button__horizontalDefault {
  /* display: none; */
  margin-top: 0.5rem;
}

.DayPickerNavigation_button__horizontalDefault {
  margin-top: 1rem;
}

.DayPicker_transitionContainer {
  width: 55rem !important;
  height: 25.8125rem;
  padding-bottom: 1.91rem !important;
}

.CalendarMonth_table {
  margin-top: 2.16rem;
}

.DayPicker_weekHeader {
  margin-bottom: 1.61rem;
  top: 4rem !important;
}

.CalendarDay__hovered_span {
  background-color: #ff280021;
  border: none;
  color: black;
}

.DayPicker_weekHeader {
  top: 45px;
}

.CalendarMonthGrid__horizontal {
  top: 14px;
}

.DayPickerKeyboardShortcuts_buttonReset {
  display: none;
}

.DayPicker__withBorder {
  border-radius: 0.55163rem;
}

.DayPickerNavigation_svg__horizontal {
  fill: black;
}

.DayPickerNavigation_button__horizontalDefault {
  top: 13.5px;
}

.DayPickerNavigation_button__default {
  border: none;
}

.DayPicker_weekHeader_ul {
  content: 'Sun' 'Mon' 'Tue' 'Wed' 'Thu' 'Fri' 'Sat';
}

.thick-line {
  height: 0.0625rem;
  background-color: #d6cfcf;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Answer 1

Since the width is applied inline and there's no class, you can use a global CSS style to target the specific div containing the calendar. In your global CSS or in the style file where you have other styles, add the following rule:

div[data-testid="DateRangePicker"] {
  width: 800px !important; /* Adjust the width as needed */
}

side note: i suggest using Prime React or MUI instead of airbnb lib because they use mui for all of their components with their own custom styles which is why you have to import them everytime which is extremely inefficient. so you're actually using mui just airbnb classes etc ontop of it which is why you have the issue.

libs like prime react and mui are made specifically to have you customize them to your specific use case which for airbnb means having daterangepicker a specific size but if you look at mui daterangepicker docs it looks almost the exact same with slightly different colors and size which if you used mui you can do your own or dynamic easily and change styles very easily with a lot of documentation of how to do so which you can even see from airbnb github.

personally i suggest using prime react as it is very easy to use and customize with amazing docs and is 100% free unlike mui