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

Question

我正在尝试调整 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 是一个 input 更深地嵌入到其他具有自己样式的 div 中（或缺乏）

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

Answer 1

为防止弹性项目收缩，将弹性收缩因子设置为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 或脚手架。

Answer 2

这是我的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>

我在反应日期选择器周围使用了包装器 div 并使用了特定的 css 选择器来使包装器 divs 反应日期选择器应用于输入和 div 我加了宽度100%

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

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

结果是输入框宽度拉伸到 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%;
}

Answer 4

Simple solution: Add this to your css file.

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

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

Answer 5

//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%;
      }

Answer 6

使用样式组件

import styled from 'styled-components';
const DatePickerStyled = styled.div`
  /* STYLE FOR WITH */
  .react-datepicker-wrapper {
    width: 100%;
  }
`;

封装组件

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>

Answer 7

我刚刚向组件传递了一个类名：

<DatePicker className='date-input-field' />

这是我设置宽度的方法：

.date-input-field {
    max-width: 7rem;
}

Answer 8

我也遇到了这个问题。为了解决这个问题，有一个属性可以直接添加到 DatePicker 组件，它是“wrapperClassName”，这个属性将允许我们直接将类应用到“react-日期选择器包装器。

示例：

<DatePicker wrapperClassName="datepicker" />

然后

.datepicker {
    width: 100%;
}

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

<DatePicker wrapperClassName="w-full" />

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

Answer 9

另一个选项：

删除所有默认样式。
引入宽度100%

我的 React 日期选择器：

 <div className="col-3">
          <DatePicker
            selected={st}
            onChange={(date: Date) => checkAndChangeStartTime(date)}
            showTimeSelect
            showTimeSelectOnly
            timeIntervals={5}
            timeCaption="Time"
            dateFormat="HH:mm"
            timeFormat="HH:mm"
          />
</div>

CSS 使这个选项起作用：

.react-datepicker-wrapper>.react-datepicker__input-container input {
    all: unset !important;
    width: 100% !important;
}

这会强制 div 为 100% 宽度，但需要您从一开始就开始设置元素样式。

Answer 10

给子项（未命名的输入）100%，同时也给它的父项（__input-container）块显示。

.react-datepicker__input-container input {
    display: block;
    width: 100% !important;
}

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

react-datepicker input width will not adjust to 100%

css

reactjs