web-dev-qa-db-fra.com

Comment implémenter la validation/restriction dans react-datepicker

J'essaie d'implémenter une restriction ou une validation dans un composant react-datepicker . J'utilise redux-form pour la validation et la normalisation (pour mettre en œuvre la restriction) 

https://redux-form.com/6.0.0-rc.1/examples/normalizing/

Question: J'ai observé que ni la fonction de normalisation ni les fonctions de validation de redux-form ne sont appelées lorsque nous essayons d'entrer quelque chose dans le champ

 date picker field

bien que cette valeur ne soit pas soumise lorsque nous soumettons le formulaire, mais je dois montrer une erreur de validation ou empêcher l’utilisateur de saisir des caractères non valides.

J'ai créé un wrapper pour le composant sélecteur de date et je l'ai utilisé dans ma fiche via le champ redux

mon composant sélecteur de date: -

return (
      <div className={"render-date-picker "}>
        <div className="input-error-wrapper">
          {(input.value) ? <label> {placeholder} </label> : ''}
          <DatePicker className="input form-flow" {...input}
            placeholderText={placeholder}
            selected={input.value ? moment(input.value) : null}
            maxDate={maxDate || null}
            minDate={minDate || null}
            dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"}
            showYearDropdown
            showMonthDropdown
            disabledKeyboardNavigation
          />

          {touched && error && <span className="error-msg">{t(error)}</span>}
          <span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span>
        </div>
      </div>
    );

champ de formulaire redux: -

<Field
 name="date_of_birth"
 type="text"
 className="input form-flow extra-padding-datepicker"
 component={RenderDatePicker}
 maxDate={moment().subtract(18, "years")}
 validate={[required, dateOfBirth]}
 normalize={isValidDateFormat}
 placeholder={t("DOB (DD/MM/YYYY)")}
/>

ma fonction de normalisation: -

export const isValidDateFormat = (value, previousValue) => {
    if (value == null || !value.isValid()) {
        return previousValue;
    }
    return value;
}
javascriptreactjsreduxredux-formreact-datepicker
6
Ayesha Mundu

react-datepicker fournit la propriété onChangeRaw pour obtenir une valeur brute (typée) à l'intérieur de datePicker. Afin de restreindre ou de valider le champ de saisie datepicker, nous avons besoin de la valeur brute qui n'est pas disponible pour l'événement onChange du composant datepicker. 

par exemple, si nous observons l'événement onChange: -  enter image description here

Il retourne un objet moment.

Afin d'obtenir une valeur brute, nous utilisons onChangeRaw

La valeur brute est obtenue simplement à partir de e.target.value . Dans mon cas, je empêche simplement l'utilisateur de saisir quoi que ce soit dans le champ de saisie datepicker par une simple fonction:

handleChangeRaw = (date) => {
    let s=document.getElementById(date_picker_id)
    s.value =moment(this.props.input.value).format("DD/MM/YYYY");
  }

Mon composant datepicker: -

<DatePicker
 .....
 disabledKeyboardNavigation
 onChangeRaw={(e)=>this.handleChangeRaw(e)}
 id={date_picker_id}
 .....
/>

Cela a résolu mon problème. J'espère que c'est utile :)

2
Ayesha Mundu