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

IT技术 css reactjs react-datepicker
2021-04-30 17:40:26

我正在尝试调整 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与 parent 相同的宽度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

4个回答

由于 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__input-container {
  width: inherit;
}

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

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

例子：

<DatePicker wrapperClassName="datepicker" />

接着

.datepicker {
    width: 100%;
}

或者如果你使用的是tailwindcss，直接申请

<DatePicker wrapperClassName="w-full" />

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

这是我的 html

<div class="container">
    <div>
        <div class="react-datepicker-wrapper">
            <div class="react-datepicker__input-container">
                <input class="form-control" type="text" value="">
            </div>
        </div>
    </div>
</div>

我在react日期选择器周围使用了一个包装 div，并使用了一个特定的 css 选择器来使包装 div react日期选择器应用于输入和我添加的 div 宽度为 100%

这是应用于 div 的 css 选择器，它包装了上面的代码片段

.container > div, 
.container > div > div.react-datepicker-wrapper, 
.container > div > div > div.react-datepicker__input-container {
  width: 100%;
}

结果是输入框宽度拉伸到 100% 但弹出日期选择器框保持相同的宽度

其它你可能感兴趣的问题
上一篇React.js - 使用 svg 线性渐变不起作用 下一篇这个 MOSFET 是否允许热床在与控制板不同的电压下运行