Question: View only mode for react-date-range?

[jasonsrogers]

Hi all

I'm looking for a way to use react-date-range in display only mode:

• no inputs
• no calendar selection
• no change event

The goal is to be able to show ranges on the calendar without allowing changes to it. (Some users have sets the ranges, some users can only view them)

So far I've managed to:

• disable the inputs
• hide the preview on hover
• not respond to selection

<DateRange
        ranges={[state.selection1, state.selection2, state.selection3]}
        editableDateInputs={false}
        showPreview={false}
        onChange={()=>{}}
        rangeColors={["#FFB800", "#B8FF00", "#B800FF"]}
      />

Then I can do some css hacking:

.rdrDateDisplayWrapper {
   display: none; 
}
// etc

Is there a better way ?