如何在React Date Range Picker中隐藏日期输入框？

针对你使用react-date-range库的DateRangePicker组件，有两种简单方法可以隐藏日期输入框：

方法一：使用组件内置属性（推荐） #

该组件提供了showDateDisplay属性，直接设置为false就能关闭顶部的日期显示/输入区域，这是最符合组件设计的解决方案：

修改后的组件代码：

<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={[]}
    showDateDisplay={false} // 新增此属性隐藏日期输入区域
/>

方法二：通过CSS强制隐藏（兜底方案） #

如果因版本差异导致上述属性不生效，可以在你的SCSS样式中添加以下代码，直接隐藏对应的DOM元素：

修改后的SCSS代码：

.DateRangePicker {
    flex-wrap: wrap;
    .rdrDayToday .rdrDayNumber span:after {
        background: #EB5A35;
    }
    // 隐藏日期输入区域
    .rdrDateDisplay {
        display: none !important;
    }
}

两种方法对比：方法一不会渲染冗余DOM，性能更优；方法二适合组件属性不支持的场景，兼容性更强。

内容的提问来源于stack exchange，提问作者Haroon Tahir