JavaScript pour les optimiseurs : ajouter un sélecteur de date et d'heure

Nous sommes tous passés par là : la tâche frustrante d'ajouter manuellement la date dans un formulaire.

Maintenant, je ne sais pas pour vous, mais quand je cherche le format de la date, mon cerveau s'emballe. Allez-vous pour MM/DD/YYYY ? Et si nous voulions AAAA-MM-JJ à la place ? Combien de jours a encore février ?

Cet article de blog vous guidera à travers certaines fonctions JavaScript qui vous aideront à optimiser votre code en ajoutant un champ de saisie DateTime Picker à vos formulaires.

Analyse de rentabilisation : ajout d'un sélecteur de date et d'heure

Dans ce scénario hypothétique, nous arrivons à l'hypothèse suivante :

Pour tester cette hypothèse, nous allons appliquer les modifications ci-dessous :

Le code utilisé dans l'expérience

Passons maintenant à la partie amusante !

Pour exécuter le changement, nous exécutons le code JavaScript ci-dessous sur la page de test. Copiez le code et essayez-le par vous-même !

 var dateInput = document.querySelector("#date");
var pris en charge = vrai ;
var test = document.createElement("input");
essayer {
  test.type = "date" ;
} attrape (e) {
  pris en charge = faux ;
}
si (supporté) {
  dateInput.setAttribute("type", "date");
  dateInput.setAttribute("value", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
function getFormattedDate(changeYear) {
  var aujourd'hui = nouvelle Date();
  var jj = String(today.getDate()).padStart(2, "0");
  var mm = String(today.getMonth() + 1).padStart(2, "0");
  var aaaa = aujourd'hui.getFullYear() + changeYear ;
  formattedDate = aaaa + "-" + mm + "-" + jj ;
  renvoie la date formatée ;
}

Répartition du code

1. Nouvelle syntaxe

La ventilation commence par passer en revue toute la nouvelle syntaxe dans l'exemple ci-dessus. Étant donné que cet article fait partie d'une série, assurez-vous de vérifier la documentation complète de la syntaxe dans les autres articles de la série (y compris cet article publié sur le blog Convert).

try {} catch (error) {} est une instruction que vous pouvez utiliser pour essayer un code spécifique et intercepter des erreurs si nécessaire. Lorsque le code s'exécute et qu'aucune erreur ne se produit, il ignore la capture.

S'il renvoie une erreur, il l'attrapera. Le script va maintenant exécuter le code entre le corps du catch. Parce qu'il transmet l'erreur dans la fonction, vous pouvez le console.log pour trouver le problème spécifique.

Habituellement, lorsque vous rencontrez une erreur, le code cesse de s'exécuter. Cette instruction vous permettra de continuer avec votre script lorsque vous vous attendez à une erreur.

.type est une méthode qui définit la valeur d'attribut "type" d'un élément dans le DOM.

.getDate() est une méthode qui renvoie le jour d'un objet date. Il renverra le jour sous forme de nombre.

.padStart(targetLength, padString) est une méthode qui nous permet de remplir une chaîne avec un caractère différent pour le montant que nous voulons. Vous transmettez le nombre de fois que vous souhaitez remplir une chaîne dans l'argument targetLength . Vous transmettez la chaîne utilisée comme remplissage dans l'argument padString. Il prendra en compte la longueur de padString lors du remplissage.

.getMonth() est une méthode qui renvoie le mois de l'objet date sous forme de nombre. Il commence à compter à 0, donc ce sera janvier. Le numéro 11 sera décembre.

String() est une méthode qui tente de convertir l'argument transmis en une valeur de chaîne. Cette méthode est généralement utilisée lorsque vous souhaitez convertir des nombres en chaînes.

.getFullYear() est une méthode qui renvoie l'année d'un objet date.

return est une déclaration courante et importante lorsque vous travaillez avec des fonctions. Parfois, vous devez exécuter une fonction pour obtenir des données et les utiliser ailleurs. Un état de retour dans une fonction mettra fin à l'exécution de la fonction et renverra tout ce qui est à droite de l'instruction.

2. Logique

 var dateInput = document.querySelector("#date");

Nous commençons par sélectionner les champs de saisie de date avec la méthode querySelector. Nous avons ajouté id=”date” à notre champ de saisie pour utiliser #date comme sélecteur. Nous attribuons l'élément à notre variable dateInput nouvellement déclarée.

 var pris en charge = vrai ;

Puis on déclare la variable supportée. Nous attribuons le booléen true à notre nouvelle variable déclarée. Nous modifierons cette valeur plus tard si le navigateur ne prend pas en charge un sélecteur datetime.

 var test = document.createElement("input");

Nous devons créer un champ de saisie que nous utiliserons uniquement pour vérifier si ce type est pris en charge. Nous faisons cela avec la méthode .createElement.

Nous transmettons "input" sous forme de chaîne pour créer l'élément d'entrée. Nous enregistrons cet élément dans la variable de test nouvellement déclarée.

Nous utiliserons l'instruction try suivante pour vérifier si notre modification est prise en charge :

 essayer {

Commencez par écrire le mot-clé try. Nous ouvrons la déclaration avec une accolade.

La fonction essaiera tout entre ces crochets. Il exécutera simplement le code pour voir si une erreur se produit.

 test.type = "date" ;

Nous pouvons tester si le type de date est pris en charge en définissant le type de date sur notre champ de saisie de test. Si aucune erreur ne se produit, nous savons que le navigateur le prend en charge.

 } attrape (e) {

Ensuite, nous écrivons notre instruction catch après la parenthèse fermante. La partie entre les accolades s'exécutera lorsque nous détecterons une erreur.

En mettant un "e" comme argument, nous pouvons l'utiliser dans notre instruction catch. Vous pouvez l'utiliser pour console.log l'erreur spécifique, par exemple.

 pris en charge = faux ;

Si nous attrapons l'erreur, nous devons changer la variable prise en charge par false. Nous utiliserons cette valeur plus tard, pour déterminer si nous voulons exécuter le changement ou non.

 }

Ensuite, fermez l'instruction catch avec un crochet fermant.

 si (supporté) {

Nous utiliserons la valeur de la variable prise en charge pour exécuter une instruction if. Si la variable est vraie, elle exécutera l'instruction. De cette façon, nous nous assurons que le navigateur n'est pas pris en charge.

 dateInput.setAttribute("type", "date");

Pour ajouter un sélecteur datetime, nous devons simplement ajouter le type d'attribut avec la date de valeur à notre variable dateInput. Selon le navigateur, il affichera maintenant une icône sur laquelle vous pouvez cliquer pour sélectionner des dates.

 dateInput.setAttribute("value", getFormattedDate(0));

Nous souhaitons également ajouter une date par défaut au champ de saisie. Vous pouvez définir la date par défaut d'un champ de date en ajoutant un attribut de valeur qui contient la date sous forme de chaîne.

Utilisez la fonction getFormattedDate, que nous avons définie, pour obtenir la date du jour au format correct. La fonction peut ajouter ou supprimer des années en saisissant un nombre comme argument lors de son appel.

 dateInput.setAttribute("min", getFormattedDate(-1));

De cette façon, nous pouvons utiliser cette ligne pour définir la date minimale du sélecteur à 1 an avant aujourd'hui. Vous pouvez le faire en passant -1 comme argument. Cela empêchera l'utilisateur de sélectionner une date antérieure à la date minimale.

 dateInput.setAttribute("max", getFormattedDate(1));

Faites de même pour le montant maximum que les utilisateurs peuvent sélectionner. Définissez l'année maximale dans un an en transmettant un "1" comme argument.

 }

Fermez l'instruction if avec une accolade. Cette modification sera désormais visible dans le champ de saisie.

Nous devons encore définir la fonction qui est utilisée dans notre instruction if. Nous souhaitons que cette fonction renvoie une date au format suivant : aaaa-mm-jj.

 function getFormattedDate(changeYear) {

Pour arriver à ce résultat, commencez par utiliser le mot-clé function pour en définir un. Nous donnons le nom getFormattedDate à notre fonction.

Pour avoir un peu de contrôle sur le type de date renvoyé, définissez changeYear comme argument.

Nous pouvons l'utiliser comme mot-clé dans le corps de la fonction pour contrôler ce qui est transmis lorsque la fonction est appelée.

 var aujourd'hui = nouvelle Date();

Démarrez ce corps de fonction en créant un nouvel objet de date. Le moment où le nouvel objet de date est créé sera l'heure qui est stockée. Cela signifie que nous pouvons affecter notre nouvel objet à la variable aujourd'hui nouvellement déclarée.

 var jj = String(today.getDate()).padStart(2, "0");

La méthode getDate obtient les jours de notre date. Lorsque les jours sont à un seul chiffre, il ajoutera un 0 avant le nombre avec la méthode padStart.

Sinon, ce serait le mauvais format pour notre champ de saisie. Nous devons également convertir le nombre en une chaîne afin de pouvoir concaténer nos nombres plus tard. Sinon, le programme utilisera l'addition.

 var mm = String(today.getMonth() + 1).padStart(2, "0");

Ici, nous utilisons getMonth pour obtenir les mois de la date d'aujourd'hui. Nous apportons une petite correction en ajoutant 1 au nombre renvoyé. Ensuite, nous avons complété le nombre avec un zéro si le nombre est à un chiffre. Cette méthode garantit que nous avons le bon format pour les données mensuelles.

 var aaaa = aujourd'hui.getFullYear() + changeYear ;

Ensuite, nous obtenons l'année du jour avec la méthode getFullyear. Utilisez le nombre transmis par la fonction pour changer l'année.

 formattedDate = aaaa + "-" + mm + "-" + jj ;

Ensuite, nous combinons toutes nos variables en une date formatée en utilisant la concaténation de chaînes.

 renvoie la date formatée ;

Nous renvoyons la variable formattedDate afin qu'elle puisse être utilisée par l'appelant de la fonction.

 }

Enfin, nous fermons notre fonction avec une accolade et terminons notre script. Le script peut utiliser cette fonction avant qu'elle ne soit déclarée car les fonctions sont hissées en haut du code. Il en va de même pour les variables. Le code peut s'exécuter un peu plus rapidement si vous déplacez la fonction formattedDate au-dessus de l'instruction if.

3. Exercice

Donc, maintenant que vous avez tout le processus défini, il ne vous reste plus qu'à l'essayer. Et n'oubliez pas de vous amuser avec !

Allez-y et modifiez le champ de saisie, de sorte que le champ min contienne la date qui est exactement de deux ans à partir d'aujourd'hui. Ensuite, ajoutez une date maximale dans deux ans. Bonne chance!

Vous n'arrivez pas à comprendre ? Envoyez-moi un message sur LinkedIn, et je vous aiderai !

Et au cas où vous auriez manqué notre dernier article, découvrez comment insérer une section de remise totale sur votre site et d'autres techniques avancées d'optimisation de la conversion.