Limiter la valeur de l'année à 4 chiffres seulement

Question

J'essaie de limiter la saisie de l'utilisateur à 4 chiffres lorsqu'il entre l'année dans le champ de la date. Pour l'instant, elle va jusqu'à 6 pour une raison quelconque. Voici ma tentative de limitation, qui a lamentablement échoué. Quelqu'un sait-il pourquoi ?

<input
    name="endDate"
    placeholder="End date"
    maxlength="4"
    pattern="[1-9][0-9]{3}"
    value={ this.props.values.endDate }
    min={ this.props.values.startDate }
    onChange={ this.update }
    type="date">
</input>

Answer 1

La façon la plus simple de le faire serait de définir l'option max à la dernière date avec une année à quatre chiffres : 31 décembre 9999.

Exemple :

<input
    name="endDate"
    placeholder="End date"
    maxlength="4"
    pattern="[1-9][0-9]{3}"
    value={ this.props.values.endDate }
    min={ this.props.values.startDate }
    max={ "9999-12-31" }
    onChange={ this.update }
    type="date">
</input>

Vous pouvez également ajouter un contrôle en utilisant le JavaScript dans votre site Web. this.update qui vérifie que l'année contient moins de quatre chiffres.

Answer 2

<input
    name="endDate"
    placeholder="End date"
    maxlength="4"
    max="9999"
    pattern="[0-9]{4}"
    value={ this.props.values.endDate }
    min={ this.props.values.startDate }
    onChange={ this.update }
    type="date">
</input>

Essayez d'utiliser un modèle avec [0-9]{4}, et fixez le maximum à 9999.