web-dev-qa-db-fra.com

la largeur d'entrée de react-datepicker ne s'ajustera pas à 100%

J'essaie d'ajuster la largeur de la boîte de saisie react-datepicker et, étonnamment, j'ai trouvé peu d'informations et je ne suis pas en mesure d'affecter sa largeur. Je voudrais juste faire la largeur d'entrée 100% de son div contenant.

Comportement prévisible

La largeur doit s'étendre jusqu'à la largeur de son conteneur parent.

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

Comportement prévisible

Ce qui suit devrait avoir pour résultat que myDatePicker a la même largeur que le parent myContainer, mais la largeur reste inchangée.

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

Tentative alternative la plus proche

La tentative la plus proche était celle-ci, mais elle affecte également la largeur de la fenêtre contextuelle, ce qui la fait s'étirer au-delà de la longueur de tout l'écran, donc cela ne fonctionne pas non plus comme une solution:

.myContainer div {
  width: 100%;
}

Comportement réel

Le sélecteur de date reste de la même longueur, sauf si une valeur px spécifique est définie pour la largeur.

Quelqu'un sait-il comment définir la largeur d'entrée à 100% pour react-datepicker?

[~ # ~] modifier [~ # ~] Je crois que la raison pour laquelle cela ne fonctionne pas comme un champ input typique est parce que react-datepicker est un input qui est intégré plus profondément dans d'autres divs qui ont leur propre style (ou leur absence) enter image description here

EDIT # 2: Voici un codepen montrant le problème - https://codepen.io/anon/pen/bjxENG

cssreactjsreact-datepicker
7
Rbar

J'ai eu le même problème et l'ai résolu grâce à la réponse de Rbar.

Enveloppez votre composant DatePicker avec un conteneur personnalisé. Attribuez ensuite la largeur à ce conteneur et à ses enfants comme ci-dessous:

import "./customDatePickerWidth.css";

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

Dans le 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%;
}
2
Ilyas Assainov

Pour empêcher les éléments flexibles de rétrécir, définissez le facteur de rétrécissement flexible sur 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>

L'extrait ci-dessus fonctionne juste donc il DOIT y avoir un autre code interférant avec css ou échafaudage.

0
Mosè Raguzzini

C'est mon 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>

J'ai utilisé un div wrapper autour du sélecteur de date de réaction et utilisé un sélecteur css spécifique pour que le diviseur de date réagisse aux wrappers s'applique autour de l'entrée et le div que j'ai ajouté pour avoir une largeur de 100%

c'est le sélecteur css appliqué à un div qui enveloppe l'extrait ci-dessus

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

Le résultat est que la largeur de la zone de saisie s'étend à 100%, mais la zone de sélection de la date de sortie reste la même largeur

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

Utilisation de composants de style

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

enferme le composant

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