代码之家 › 专栏 › 技术社区 › Rbar

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

react-datepicker reactjs css

Rbar · 技术社区 · 7 年前

我正在尝试调整react datepicker输入框的宽度,令人惊讶的是,在那里发现的信息很少,无法影响其宽度。我只想使输入宽度为其包含div的100%。

预期行为

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

我的反应日期选择器

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

实际行为

日期选择器保持相同的长度,除非为宽度设置了特定的px值。

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

编辑我相信它不像一个典型的 input 字段是因为 react-datepicker 是一个 输入 在其他有自己风格(或花言巧语)的div中嵌入得更深

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

6 回复 | 直到 7 年前

Rbar 7 年前

由于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%;
}

Yash P Shah 7 年前

简单解决方案 :将此添加到css文件中。

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

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

Mosè Raguzzini 7 年前

要防止弹性项收缩,请将“弹性收缩因子”设置为0:

.myContainer.myItem文件{ 弯曲收缩:0; }

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%; 
}

<div class="myContainer">
  <input class="myDatePicker">
</div>

上面的代码片段只起作用,因此必须有其他代码干扰css或脚手架。

Rbar 7 年前

这是我的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日期选择器周围使用了一个wrapper div,并使用了一个特定的css选择器,使wrapper divs react日期选择器应用于输入周围,我添加的div的宽度为100%

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

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

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

user11304031 7 年前

//html file
  <div className="customDatePickerWidth">
              <DatePicker
                placeholderText="Select Schedule Date"
             />
  </div>

//css file    
.customDatePickerWidth, 
    .customDatePickerWidth > div.react-datepicker-wrapper, 
    .customDatePickerWidth > div > div.react-datepicker__input-container
    .customDatePickerWidth > div > div.react-datepicker__input-container input {
       width: 100%;
       height: 100%;
    }
    .react-datepicker__input-container  {
        width: inherit;
        height: inherit;
      }
      .react-datepicker__input-container input {
        width: inherit;
        height: 100%;
      }

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

-2

Rbar 7 年前

这就是我的工作。默认情况下 Manager 班级是 null .. 给它一个类名,然后你就可以申请 css 为了它。

去 node_modules > react-datepicker > es > index.js >第2456行:

更改:

return React.createElement(
  Manager,
  null,         // NOTE: change this line
  React.createElement(
    Target,
    { className: "react-datepicker-wrapper" },
    targetComponent
  ),
  popper
);

致:

return React.createElement(
  Manager,
  { className:"react-datepicker-manager" },  // NOTE: changed this line to contain a className
  React.createElement(
    Target,
    { className: "react-datepicker-wrapper" },
    targetComponent
  ),
  popper
);

那你可以申请 css 像这样 使宽度为100% :

.myContainer .react-datepicker-manager,
.myContainer .react-datepicker-wrapper,
.myContainer .react-datepicker__input-container,
.myContainer .react-datepicker__input-container input {
  width: 100%;
}

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

预期行为

我的反应日期选择器

预期行为

最近的替代尝试

实际行为