J'utilises jquery pour insérer automatiquement / dans une date après 2 caractères puis 4 afin de récupérer la date sous jj/mm/yyyy. Le code fonctionne parfaitement en environnement pc/mac sous Windows ou macOS. Cependant mon code ne fonctionne pas dans les navigateurs des téléphones mobiles.

Avez - vous déjà été confronté à ce problème ? Avez - vous un exemple de code qui soit compatible en desktop et en GSM ? vous remerciant, ci dessous le code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#DN').keyup(function(){
        var nb_car = $(this).val().length;
        if(nb_car == 2 || nb_car == 5) {
            $(this).val($(this).val()+'/');
        }
    });
});
</script>

Salut Question peut-être bête mais on ne sait jamais, les terminaux mobiles ont accès à internet ?

-
Edité par fasteel 5 décembre 2017 à 14:04:32

salut

t'es sur que t'as bien rafraichit ta page sans le cache ?

en tout cas ton algorithme est pas bon : si l'utilistauer saisi "13", tu va ajouter un "/", donc on obtient "13/". Ok, maintenant s'il décide de corriger, il appui sur retour pour effacer "/", ce qui donne "13" et toi aussitot tu lui rajoute un "/". Foireux...

Merci pour vos réponses

oui les téléphones ont bien accès à Internet. Je suis d'accord avec lCaba, en effet ma méthode ne permet pas une correction facile. Si l'utilisateur saisie 13 alors que son jour de naissance est 14, c'est pas évident de corriger. Il faut positionner le curseur avant le slash puis supprimer. Bref c'est galère.

Pourtant sur un navigateur de pc, quelque soit le navigateur soit cela fonctionne bien. C'est uniquement sur les navigateurs de smartphone que cela fonctionne pas correctement.

Pour corriger le tir, j'ai mis en place une détection de la largeur de l'écran. Cela désactive le / automatique sur les smartphone. Cela ne résoud pas le problème mais le contourne quand même.

$(document).ready(function() {
    if(window.innerWidth>600)
    $('#DN').keyup(function(){
        var nb_car = $(this).val().length;
        if(nb_car == 2 || nb_car == 5) {
            $(this).val($(this).val()+'/');
        }       
    });
});

Tu connais <input type="date">  ?

je ne connaissais pas cette option sur input, j'utilise <input type="text"> et datepicker en bibliothèque javascript. Je vais regarder cette balise, en effet ca peut être intéressant de l'utiliser directement en html.

merci pour ce conseil.

En effet c'est très intéressant, j'ai trouvé ce lien qui explique très bien comment gérer cette balise.

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/date

-
Edité par sffr49 6 décembre 2017 à 15:26:08

Salut,

Tu utilise datepicker ?

https://jqueryui.com/datepicker/#date-formats

Attention à la compatilibité car c'est une fonctionnalité récente, mais à choisir entre les utilisateurs des vieux navigateurs et les utilisateurs mobiles, je choisirais les 2nd. Le point noir c'est Safari qui ne le supporte pas et qui est massivement utilisé sur les i phones

oui en effet, j'utilise le datepicker mais je permets une saisie manuelle à l'utilisateur. C'est dans ce cadre que mon insertion de / automatique bug sur les smartphones.

l'option <input type = "date"> me semble pas mal. C'est vrai que la compatibilité est à tester mais le lien vers le site de mozilla fournit un javascript qui permet de tester si la navigateur prend en charge cet option ou pas. A voir sur iphone car en effet beaucoup d'utilisateurs passe par safari. Donc à voir. Je cloture ce sujet.

Merci pour vos conseils et aide.