Question

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

预期行为

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

我的react-datepicker

<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

由于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 2

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

示例：

<DatePicker wrapperClassName="datepicker" />

然后

.datepicker {
    width: 100%;
}

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

<DatePicker wrapperClassName="w-full" />

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

Answer 3

要防止弹性项目收缩，请将弹性收缩因子设置为0：

.myContainer .myItem { flex-shrink：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 4

这是我的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 Date Picker周围使用了包装器div，并使用特定的CSS选择器来使包装div React Date Picker在输入周围应用，并且我添加的div的宽度为100％

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

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

结果是输入框的宽度扩展到100％，但弹出日期选择器框的宽度保持不变

Answer 5

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

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

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

Answer 6

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

使用样式化组件

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 8

我刚刚将className传递给组件：

for (int i = 0; i < this.rowHeights.length; k++)
    {
        this.rowHeightsTwo[i] = this.rowHeights[i]
    }

这是我设置宽度的方法：

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

Answer 9

这对我有用。默认情况下，var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet1 = ss.getSheetByName("Sheet 1"); var sheet2 = ss.getSheetByName("Sheet 2"); var cell1 = sheet1.getRange('A1'); var x= cell1.getValue(); Logger.log("AAAAAAAAAA",x); if(cell1.getValue()== false) { Logger.log("box not checked"); sheet2.hideSheet(); } else if (cell1.getValue() == true) { sheet2.showSheet(); }类是Manager ..给它一个类名，然后可以对其应用null。

转到 css> node_modules> react-datepicker> es>第2456行：

更改：

index.js

收件人：

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

然后您可以像这样应用 css 来将宽度设置为100％：

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
);

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

预期行为

我的react-datepicker

预期行为

最近的替代尝试

实际行为

9 个答案: