Contrôle de saisie de la date principale : désactivation des dates passées dans les formulaires HTML

Lorsque vous travaillez avec des formulaires qui obligent les utilisateurs à sélectionner une date, vous devez souvent les empêcher de choisir des dates passées, en particulier pour des scénarios tels que la prise de rendez-vous ou la réalisation de réservations. Il s'agit d'une exigence courante dans de nombreuses applications et, heureusement, HTML et JavaScript offrent un moyen simple de gérer cela.

La saisie de la date HTML

L'option L'élément avec type="date" permet aux utilisateurs de choisir facilement une date. Cependant, par défaut, l'utilisateur peut sélectionner n'importe quelle date, y compris les dates passées. Pour empêcher les utilisateurs de sélectionner une date antérieure au jour en cours, vous pouvez utiliser l'attribut min en conjonction avec JavaScript.

Exemple de saisie de date HTML

Voici un exemple de saisie de date simple :

<input type="date" id="reservationDate" name="reservationDate" />

Désactiver les dates passées

Pour empêcher les utilisateurs de sélectionner une date passée, vous devez définir l'attribut min de l'attribut champ. L'attribut min spécifie la date minimale pouvant être sélectionnée.

Vous pouvez définir dynamiquement la date actuelle à l'aide de l'objet Date de JavaScript, la formater au format AAAA-MM-JJ requis et l'appliquer à l'attribut min.

Implémentation dans React

Pour les utilisateurs de React, voici comment intégrer cela dans un composant TextField :

import { TextField } from "@mui/material";
import { Field } from "formik";

const ReservationDateField = ({ touched, errors }) => {
  return (
    <Field
      as={TextField}
      label="Reservation Date"
      type="date"
      name="reservationDate"
      fullWidth
      margin="normal"
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputProps: {
          min: new Date().toISOString().split("T")[0], // Disable past dates
        },
      }}
      error={touched.reservationDate && Boolean(errors.reservationDate)}
      helperText={touched.reservationDate && errors.reservationDate}
    />
  );
};

Panne:

• Formatage de la date : new Date().toISOString().split("T")[0] donne la date du jour au format AAAA-MM-JJ, qui est requis pour l'attribut min.
• Attribut min : cela garantit que les utilisateurs ne peuvent sélectionner que des dates à partir d'aujourd'hui.

Pourquoi est-ce important ?

Restreindre les dates passées est essentiel dans les formulaires qui gèrent les événements futurs comme :

• Prise de rendez-vous.
• Planification des livraisons.
• Définition de futurs rappels.

Il améliore l'expérience utilisateur en empêchant les sélections de dates non valides et réduit le risque d'erreur de l'utilisateur.

Conclusion

La désactivation des dates passées est un moyen simple mais puissant d'améliorer vos formulaires. Que vous soyez un développeur débutant ou expérimenté, l'application de cette technique garantit que vos utilisateurs ne sélectionnent pas accidentellement des dates incorrectes. Cette petite étape peut faire une grande différence dans la convivialité de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!