我正在尝试调整react-datepicker输入框的宽度,但令人惊讶的是发现很少的信息,并且无法影响其宽度。我只想让输入宽度为其包含的 div 的 100%。
预期行为
宽度应扩展到其父容器的宽度。
我的 react 日期选择器
<div className="myContainer">
<DatePicker
className="myDatePicker"
fixedHeight
readOnly={true}
isClearable={false}
placeholderText="End date"
selected={this.props.defaultValue}
onChange={(date) => this.props.handleDateChange(date)}
/>
</div>
预期行为
以下操作应导致 myDatePicker
与父 myContainer
宽度相同,但宽度保持不变。
.myContainer {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex: 1 1 0px;
}
.myDatePicker {
width: 100%; // note: if I change this value to a fixed value (such as 500px) then the width is effected
}
最接近的替代尝试
最接近的尝试是这个,但它也会影响弹出窗口的宽度,导致它超出整个屏幕的长度,因此这也不能作为解决方案:
.myContainer div {
width: 100%;
}
实际行为
日期选择器保持相同的长度,除非为宽度设置了特定的 px 值。
有人知道如何将react-datepicker的输入宽度设置为100%吗?
<小时/>编辑
我相信它不像典型的 input
字段那样工作的原因是因为 react-datepicker
是一个 input
,它嵌入在其他 div 中更深处,有自己的风格(或缺乏)
编辑#2:这是一个显示问题的代码笔 - https://codepen.io/anon/pen/bjxENG
最佳答案
我遇到了同样的问题,并通过 Rbar 的回答解决了它。
使用自定义容器包装您的 DatePicker 组件。然后将宽度分配给该容器及其子容器,如下所示:
import "./customDatePickerWidth.css";
<div className="customDatePickerWidth">
<DatePicker dateFormat="dd/MM/yyyy" />
</div>
在customDatePickerWidth.css中:
.customDatePickerWidth,
.customDatePickerWidth > div.react-datepicker-wrapper,
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
width: 100%;
}
关于css - react-datepicker 输入宽度不会调整为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51710700/