Search code examples
javascriptreactjstypescript

Hide Date Input Fields in React Date Range Picker


enter image description here

I want to hide Date input fields in react date range picker. Currently, I am using DateRangePicker from react-date-range.

scss:

.DateRangePicker {
    flex-wrap: wrap;
    .rdrDayToday .rdrDayNumber span:after {
        background: #EB5A35;
    }
}

code:

<DateRangePicker
    onChange={item => props.setRange([item.selection])}
    ranges={props.range}
    months={2}
    direction="horizontal"
    dragSelectionEnabled={true}
    showSelectionPreview={true}
    moveRangeOnFirstSelection={false}
    className="DateRangePicker"
    rangeColors={['#EB5A35', '#EB5A35', '#EB5A35']}
    staticRanges={[]}
    inputRanges={[]}
/>

Solution

  • Add this to your CSS file to hide the field, hope this will help

    .rdrDateDisplayWrapper {
       display: none; 
    }
    

    enter image description here