16

我正在尝试调整 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与 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

9 回答 9

31

由于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%;
}
于 2019-02-01T13:52:03.970 回答
9

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

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

.react-datepicker-wrapper {
  width: 100%;
}
于 2019-03-03T03:45:00.660 回答
9

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

例子：

<DatePicker wrapperClassName="datepicker" />

进而

.datepicker {
    width: 100%;
}

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

<DatePicker wrapperClassName="w-full" />

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

于 2020-12-21T02:04:20.190 回答
1

这是我的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 选择器来使包装器 div 反应日期选择器适用于输入和我添加的 div 宽度为 100%

这是应用于包含上述代码段的 div 的 css 选择器

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

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

于 2018-12-18T09:47:08.103 回答
1 
//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%;
      }
于 2019-04-03T07:33:23.667 回答
0

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

于 2018-08-06T15:13:14.180 回答
0

使用样式组件

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

封装组件

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>
于 2020-03-02T15:59:01.923 回答
0

我刚刚将一个 className 传递给组件：

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

这是我设置宽度的方法：

.date-input-field {
    max-width: 7rem;
}
于 2020-08-09T02:25:18.303 回答
0

另外一个选项：

  1. 默认情况下删除所有样式。
  2. 引入宽度 100%

我的反应日期选择器：

 <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% 宽度，但需要您从头开始设置元素的样式。

于 2021-08-24T13:27:04.393 回答