Sélecteur de date PHP: implémente le traitement intelligent de la valeur par défaut aujourd'hui et les valeurs d'entrée de l'utilisateur

Cet article détaille comment définir la valeur par défaut sur la date actuelle pour le sélecteur de date (ou la zone d'entrée de date) en PHP tout en garantissant que les données de date soumises par l'utilisateur via le formulaire peuvent être reçues et utilisées correctement. Avec la logique de jugement conditionnel concis, vous pouvez afficher gracieusement la date d'aujourd'hui lorsque la page est chargée pour la première fois et conserver ses choix après que l'utilisateur a soumis le formulaire, améliorant l'expérience utilisateur et la flexibilité du traitement des données.

Exigences de base et analyse de scénario

Dans le développement d'applications Web, la boîte d'entrée de date est un élément interactif commun et est généralement utilisé avec le composant DatePicker. Pour ce type de boîte d'entrée, les développeurs sont souvent confrontés aux deux besoins suivants:

1. Par défaut initial: Lorsqu'un utilisateur visite pour la première fois une page contenant une boîte d'entrée de date, la zone d'entrée doit afficher automatiquement la date actuelle (c'est-à-dire "aujourd'hui") pour plus de commodité.
2. Persistance d'entrée de l'utilisateur: Lorsqu'un utilisateur sélectionne une date spécifique dans la zone d'entrée de date et le soumet via le formulaire, si la page est rechargée pour une raison quelconque (telle que l'échec, la rafraîchissement ou la redirection de la validation du formulaire), la zone d'entrée de date devrait conserver la valeur de date précédemment soumise par l'utilisateur plutôt que de revenir à la date en cours.

Cela nécessite que la logique du backend (PHP) détermine intelligemment si la page est actuellement chargée ou si l'utilisateur a soumis des données, et sur la base de cela, déterminez la valeur d'affichage de la zone d'entrée de date.

Solution: utilisez l'attribution conditionnelle PHP

La clé pour résoudre les problèmes ci-dessus réside dans l'application flexible de PHP de $ _Post Global Array and Conditional Judgment. Nous pouvons utiliser l'opérateur ternaire de PHP pour implémenter cette logique concise et efficacement.

Lorsque la page est chargée pour la première fois, le tableau $ _post ne contient généralement pas la valeur de la zone d'entrée de date (par exemple name = "nnnx"). Et lorsque l'utilisateur soumet des données via le formulaire, $ _post ['nnnx'] contiendra la date sélectionnée par l'utilisateur. Sur la base de cela, nous pouvons écrire le code PHP suivant pour déterminer la valeur que la zone d'entrée de date doit afficher:

  Php
// Définissez le format de date attendu, tel que Yyyy / mm / dd
$ dateFormat = 'y / m / d';

// Vérifiez si $ _POST ['nnx'] existe et n'est pas vide // Si l'utilisateur soumet une date (c'est-à-dire $ _post ['nnnx'] et n'est pas vide), utilisez cette valeur // sinon (la page est chargée pour la première fois ou l'utilisateur soumet une valeur null), utilisez la date actuelle comme valeur par défaut $ sélectionnée =! $ _Post ['nnnx']: date ($ dateFormat);

// À ce stade, la variable $ selectedDate conservera la valeur que la zone d'entrée de date devrait enfin afficher // il peut être la date soumise par l'utilisateur avant ou la date d'aujourd'hui?>

Analyse de code:

• $ dateFormat = 'y / m / d';: Définissez une chaîne de format de date pour s'assurer que la date générée par PHP est cohérente avec le format attendu par le sélecteur de date avant.
• ! vide ($ _ post ['nnnx']): Il s'agit d'une expression booléenne utilisée pour déterminer s'il existe une clé nommée Nnnx dans le tableau $ _post, et la valeur de la clé n'est pas vide (y compris null, vide string '', 0, false, etc.). Utiliser! Vide () est plus robuste que l'utilisation de l'ISSet () seul, car il prend en compte à la fois l'existence d'une clé et la valeur est vide.
• $ _POST ['nnnx']: si! Vide ($ _ post ['nnnx']) est vrai, cela signifie que l'utilisateur a soumis une valeur de date non via via le formulaire et que la valeur soumise sera utilisée pour le moment.
• Date ($ dateFormat): si! vide ($ _ post ['nnnx']) est faux, cela signifie que la page se charge pour la première fois, ou que l'utilisateur soumet une valeur nulle. Dans ce cas, nous appelons la fonction Date () de PHP, qui obtient et renvoie la chaîne de date actuelle en fonction du Prédéfini $ DateFormat.

Exemple de code complet

Pour une meilleure démonstration, voici un exemple de page PHP complète qui contient des formulaires HTML et un sélecteur de date JavaScript (prendre JQuery UI DatePicker comme exemple):

 

<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <title> PHP Date Sélecteur Traitement de valeur par défaut 
    <style>
        Corps {Font-Family: &#39;Segoe Ui&#39;, Tahoma, Genève, Verdana, Sans-Serif; marge: 20px; Color d&#39;arrière-plan: # F4F7F6; Couleur: # 333; }
        .Container {max-largeth: 600px; marge: 30px automatique; rembourrage: 25px; Color d&#39;arrière-plan: #FFFF; Border-Radius: 8px; Box-Shadow: 0 4px 12px RGBA (0,0,0,0,1); }
        H1 {couleur: # 2C3E50; Texte-aligne: Centre; marge-fond: 25px; }
        étiquette {affichage: bloc; marge-fond: 8px; Police-poids: Bold; Couleur: # 555; }
        entrée [type = "text"] {padding: 10px; Border: 1px solide #ddd; Border-Radius: 5px; Largeur: calc (100% - 22px); Dimensionnement en boîte: Border-Box; taille de police: 16px; }
        bouton {rembourrage: 12px 25px; Color en arrière-plan: # 007BFF; Couleur: blanc; Border: aucun; Border-Radius: 5px; curseur: pointeur; marge: 20px; taille de police: 16px; Transition: Color de l&#39;arrière-plan 0.3S facilité; Affichage: bloc; Largeur: 100%; }
        Bouton: Hover {Background-Color: # 0056B3; }
        .info-message {background-Color: # e9f7ef; Border-Left: 5px solide # 28A745; rembourrage: 15px; marge: 20px; Border-Radius: 4px; Couleur: # 218838; }
        .Instructions {Background-Color: # f8f9fa; Border: 1px en pointillé # CED4DA; rembourrage: 15px; marge: 25px; Border-Radius: 4px; taille de police: 0,9em; hauteur de ligne: 1.6; Couleur: # 6C757D; }
    </ style>
    <! - Présentation des fichiers CSS et JS pour jQuery et jQuery UI ->
    <link rel = "Stylesheet" href = "// code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src = "// code.jquery.com/jquery-3.6.0.min.js"> </ script>
    <script src = "// code.jquery.com/ui/1.13.2/jquery-ui.min.js"> </ script>
    <cript>
        $ (function () {
            // Initialisez le sélecteur de date et définissez le format de date pour être cohérent avec php $ ("# nnnx_date"). DatePicker ({{
                DateFormat: "yy / mm / dd" // Remarque: yy / mm / dd de jQuery ui correspond à y / m / d de php
            });
        });
    
</ head>
<body>

    <div class = "conteneur">
        <h1> Date d&#39;entrée Date Valeur par défaut et persistance 

        <? Php
        // définir le format de date attendu $ dateFormat = &#39;y / m / d&#39;;

        // déterminer $ selectedDate en fonction de la valeur $ _POST ou de la date actuelle
        $ selectedDate =! vide ($ _ post [&#39;nnnx&#39;])? $ _Post [&#39;nnnx&#39;]: date ($ dateFormat);

        // S&#39;il s&#39;agit d&#39;une soumission de formulaire, affichez la date de la soumission de l&#39;utilisateur if ($ _server [&#39;request_method&#39;] === &#39;post&#39;) {
            echo &#39;<div class = "info-message">&#39;;
            Echo &#39;La date à laquelle vous avez soumis est: <strong>&#39;. htmlSpecialChars ($ selectedDate). &#39;&#39;;
            echo &#39;&#39;;
        }
        ?>

        <form action = "nnnx.php" méthode = "post">
            <étiquette pour = "nnnx_date"> Sélectionner la date: </ label>
            <! - L&#39;attribut de nom de la balise d&#39;entrée correspond au nom de clé $ _POST en php ->
            <! - L&#39;attribut de valeur est réglé dynamiquement sur la valeur de $ selectedDate ->
            <input type = "text" id = "nnnx_date" name = "nnnx" value = "<? php echo htmlSpecialChars ($ selectedDate);?>">
            <Button Type = "Soumider"> Soumettre la date 
        </ form>

        <div class = "instructions">
            <p> <strong> Instructions de fonctionnement:  
            <l>
                <li> La zone d&#39;entrée de date affichera automatiquement la date d&#39;aujourd&#39;hui lors de la première visite de cette page. 
                <li> Sélectionnez une date différente via le sélecteur de date et cliquez sur le bouton "Soumettre la date". 
                <li> Une fois la page rechargée, la zone d&#39;entrée de date affiche la date à laquelle vous venez de sélectionner et de soumettre, et non à la date d&#39;aujourd&#39;hui. 
                <li> Effacer la boîte de saisie et soumettre, et la date sera restaurée aujourd&#39;hui. 
            
        
    


</style>
</title></adal>

Choses à noter

1. Uniformité du format de date: c'est le point le plus critique. Assurez-vous que le format de date utilisé par la fonction DATE () dans PHP (tel que Y / M / D) est cohérent avec le composant de sélecteur de date JavaScript frontal (tel que le DateFormat: "YY / MM / DD" de JQuery UI DatePicker) et le format de données lors de la soumission du formulaire. Les formats incohérents peuvent entraîner des erreurs d'analyse de date ou des exceptions d'affichage.
2. SÉCURITÉ: Bien que dans ce cas ne fasse simplement écho à la date de la soumission des utilisateurs, dans un environnement de production réel, toutes les données d'entrée utilisateur obtenues à partir de $ _POST doivent être strictement vérifiées et désinfectées pour éviter les attaques de scripts croisés (XSS), l'injection SQL ou d'autres vulnérabilités de sécurité potentielles. Par exemple, filter_var () peut être utilisé conjointement avec des filtres appropriés, ou strToTime () pour vérifier la validité du format de date. L'utilisation de htmlSpecialChars () dans l'attribut de valeur est une pratique de base pour empêcher les XS.
3. Intégration de sélecteur de date frontal: jQuery UI DatePicker est utilisé dans l'exemple. La plupart des bibliothèques de sélecteur de date JavaScript initialisent les valeurs d'affichage en lisant l'attribut de valeur de leur élément d'entrée HTML associé. L'attribut de valeur généré par le backend PHP consiste à coopérer de manière transparente avec ce mécanisme. Assurez-vous que JS frontal initialise le sélecteur de date correctement après le chargement de la page.
4. Expérience utilisateur et gestion des erreurs: Si l'utilisateur soumet une date de manière incorrecte ou vide, la logique actuelle la réinitialise aujourd'hui. Dans des applications plus complexes, vous souhaiterez peut-être fournir des invites d'erreur plus spécifiques et permettre à l'utilisateur de corriger les entrées plutôt que de simplement remplacer. Cela implique généralement une logique de vérification de forme plus fine.
5. Temps horaire de la date du serveur: assurez-vous que le fuseau horaire du serveur PHP est correctement défini pour vous assurer que les "aujourd'hui" obtenus par la fonction Date () sont la date locale attendue par l'utilisateur. Il peut être défini via la fonction date_default_timezone_set ().

Résumer

En utilisant l'opérateur ternaire concis en php combiné avec les fonctions! Vide () et date (), nous pouvons implémenter gracieusement le paramètre de valeur par défaut de la zone d'entrée de date et la persistance des valeurs d'entrée utilisateur. Ce modèle est une méthode générale et efficace pour traiter l'écho de données de formulaire dans le développement Web, qui non seulement répond aux exigences fonctionnelles, mais améliore également considérablement l'expérience utilisateur. La maîtrise de ce type de compétences en affectation conditionnelle est cruciale pour créer des applications Web robustes et conviviales.

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!