react-datepicker输入宽度不会调整为100％ [英] react-datepicker input width will not adjust to 100%

问题描述

我正在尝试调整react-datepicker输入框的宽度，令人惊讶的是，那里的信息很少，并且无法影响其宽度.我只想使输入宽度为其包含div的100％.

I am attempting to adjust the width of the react-datepicker input box and surprisingly have found little information out there and am unable to effect its width. I would just like to make the input width 100% of its containing div.

宽度应扩展为其父容器的宽度.

The width should expand to the width of its parent container.

<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 的宽度相同，但宽度保持不变.

Expected behavior

The following should result in the myDatePicker being the same width as the parent myContainer, but the width remains unchanged.

.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
}

最近的替代尝试

最接近的尝试是此操作，但它也会影响弹出窗口的宽度，导致其延伸超过整个屏幕的长度，因此这也不能作为解决方案:

Closest Alternative attempt

The closest attempt was this, but it effects the width of the popup as well, causing it to stretch beyond the length of the entire screen, so this does not work as a solution either:

.myContainer div {
  width: 100%;
}

实际行为

日期选择器的长度保持不变，除非为宽度设置了特定的px值.

Actual behavior

The date picker remains the same length, unless a specific px value is set for the width.

有人知道如何将react-datepicker的输入宽度设置为100％吗?

编辑我相信它之所以不能像典型的 input 字段那样工作，是因为 react-datepicker 是一个 input ，它更深地嵌入了其他div内，有自己的风格(或缺乏风格)

EDIT I believe the reason it does not work like a typical input field is because react-datepicker is an input that is embedded deeper inside other divs that have their own styling (or lackthereof)

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

EDIT #2: Here is a codepen showing the issue - https://codepen.io/anon/pen/bjxENG

推荐答案

由于Rbar的回答，我遇到了同样的问题并得以解决.

I had the same issue and solved it thanks to Rbar's answer.

用自定义容器包装DatePicker组件.然后将宽度分配给该容器及其子容器，如下所示:

Wrap your DatePicker component with a custom container. Then assign the width to that container and its children like below:

import "./customDatePickerWidth.css";

<div className="customDatePickerWidth">
   <DatePicker dateFormat="dd/MM/yyyy" />
</div>

在customDatePickerWidth.css内部:

Inside the 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%;
}

这篇关于react-datepicker输入宽度不会调整为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！