react datepicker输入宽度将不会调整为100%

Question

我试图调整反应日期选择器输入框的宽度，但令人惊讶的是，我发现几乎没有信息，无法影响其宽度。我只想使输入宽度100%包含div。

宽度应扩展到其父容器的宽度。

<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%吗？

编辑#2：这里是一个代码显示问题-https://codepen.io/anon/pen/bjxENG

Answer 1

我也偶然发现了这个问题。为了解决这个问题，有一个属性可以直接添加到DatePicker组件中，即“wrapperClassName”，该属性允许我们直接将类应用到“react DatePicker wrapper”。

示例：

<DatePicker wrapperClassName="datepicker" />

然后呢

.datepicker {
    width: 100%;
}

或者，如果您使用的是tailwindcss，只需直接应用

<DatePicker wrapperClassName="w-full" />

注意：这只会使包装为全宽度，因此如果希望输入字段也占据全宽度，还需要在datepicker组件上应用“宽度：100%”。

Answer 2

简单的解决方案：将其添加到css文件中。

.react-datepicker__input-container {
  width: inherit;
}

.react-datepicker-wrapper {
  width: 100%;
}

Answer 3

我也遇到了同样的问题，多亏了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%;
}