Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

Faciliter la saisie d'une date avec jQuery

Article posté le 18-09-2014 dans la catégorie JavaScript, JQuery...

Attention, le contenu cet article est peut-être obsolète!

Partons du principe que l'utilisateur doive saisir sa date de naissance.

Le script suivant permet de faciliter la saisie d'une date au format jj/mm/aaaa pour l'utilisateur.

$('#dateDeNaissance').keyup(function(e) 
{  
   if($(this).val()[1]=="/") 
   {
     var temp = $(this).val();
     $(this).val('');
     $(this).val('0'+temp);
   }
   
   if($(this).val()[4]=="/") 
   {
     var tempo = $(this).val();
     $(this).val('');
     var newTempo = tempo.charAt(0) + tempo.charAt(1) + tempo.charAt(2) + "0" + tempo.charAt(3) + "/";
     $(this).val(newTempo);
   }
   
   var nb_car = $(this).val().length;
 
   if((nb_car == 2 || nb_car == 5) && ($(this).val().charAt(4)!="/")) 
   {
      $(this).val($(this).val()+'/');
   }
});

Ensuite, au moment de soumettre, voici la fonction pour la validation  (je précise qu'elle est basique. Si jamais vous en voulez une plus puissante, essayez le plugin jQueryValidate) :

function valideDate()
{   
    if($('#dateDeNaissance').val().length<10){return false;}
    
    var jour = $('#dateDeNaissance').val().charAt(0) + $('#dateDeNaissance').val().charAt(1);
    if(jour <1 || jour >31){return false;}
    if(!$.isNumeric(jour)){return false;}
    
    var mois = $('#dateDeNaissance').val().charAt(3) + $('#dateDeNaissance').val().charAt(4);
    if(!$.isNumeric(mois)){return false;}
    if(mois <1 || mois >12){return false;}
    
    var annee = $('#dateDeNaissance').val().charAt(6) + $('#dateDeNaissance').val().charAt(7) + $('#dateDeNaissance').val().charAt(8) + $('#dateDeNaissance').val().charAt(9);
    if(!$.isNumeric(annee)){return false;}
    
    return true;
}

Pour finir, pensez à ce que côté serveur, vous re-contrôliez votre date. Exemple avec PHP, ce bout de script vous permer de remettre la date au format du language pour faciliter son traitement :

if(strlen($laDate) == 10 && $laDate[2] == "/" && $laDate[5] == "/"){
$laDate = "18/09/2014";
$laDate = explode("/", $laDate);
$laDate = $laDate[2] . "-" . $laDate[1] . "-" . $laDate[0];
}else{
//format non valide
}

Quand c'est fini, vous pouvez contrôler plein de chose notamment avec les fonctions que vous trouverez ici. Bon courage.


Cet article vous a plu? Découvrez d'autres articles


Tweet
comments powered by Disqus