Sélection du même élément en utilisant la classe dans JQuery

J'ai beaucoup de champs de date dans mon application. Les ID ne peuvent pas aider, je veux mettre en forme les champs de date en utilisant la classe. Tout en essayant de formater la date, la date holder2 est également modifiée à la date de holder1, PFBSélection du même élément en utilisant la classe dans JQuery

$(document).ready(function(){ 
 
    $('.date').val($.format.date($('.date').val(), "MM/dd/yyyy hh:mm a")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
</head> 
 
<body> 
 
    <div> 
 
    Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> 
 
    Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> 
 
    </div> 
 
</body> 
 
</html>

Courant de sortie: Titulaire 1: 06/02/2017 00:30 Titulaire 2: 06/02/2017 00:30

Résultats escomptés: Titulaire 1: 06/02/2017 00:30 Titulaire 2 03/12/2017 11:06 AM

PS: Le type est mentionné en tant que texte, car s'il est mentionné en tant que date, chrome affiche son propre datpicker. Mon datpicker personnalisé et mes chrome sont chargés en même temps. Aidez-moi s'il vous plaît. Merci.

Source

2017-03-12 liwevire

Il existe une mise en forme utilisant les classes css directement dans la documentation. https://github.com/phstc/jquery-dateFormat

$(document).ready(function() { 
 
    var longDateFormat = "MM/dd/yyyy hh:mm a"; 
 
    jQuery(".date").each(function(idx, elem) { 
 
    jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), longDateFormat)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> 
 

 
<div> 
 
    Holder 1: 
 
    <input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"> 
 
    <br> Holder 2: 
 
    <input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> 
 
</div>

Source

2017-03-12 06:42:08

Je pouvais voir une variable 'IDX' qui l devine une variable d'index, mais il est utilisé nulle part. Alors, quel est l'usage de celui-ci. Pouvez-vous expliquer le fonctionnement ou s'il vous plaît donnez-moi quelques conseils à regarder. Merci. – liwevire

Je viens de trouver un ici - [fonctions de rappel] (http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/) – liwevire

vous ne pouvez pas faire comme ça, parce qu'à la fin vous voir les toutes les entrées ont le même résultat, en fait le premier résultat ajouté à toutes les entrées.

vous devez utiliser each()

$('.date').each(function(index){ 
    $(this).someMethod() 
});

Source

2017-03-12 06:43:33 data

Le sélecteur $('.date') appliquera le changement à tous les éléments correspondant à ce sélecteur jQuery, mais obtiendrez le val du premier élément correspondant à la requête. Pour obtenir le val à partir de l'élément que vous allez formater, vous pouvez utiliser le .each() de jQuery, ainsi que $(this), pour vous assurer que vous ciblez l'élément correspondant en cours.

$(document).ready(function(){ 
 
\t \t \t $('.date').each(function() { 
 
     $(this).val($.format.date($(this).val(), "MM/dd/yyyy hh:mm a")); 
 
     }); 
 
\t \t });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> 
 
\t \t Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> 
 
\t </div> 
 
</body> 
 
</html>

Source

2017-03-12 06:43:52

Vous devez faire les éléments un à la fois, que vous pouvez faire avec une boucle .each(), ou, plus commodément, par providing a callback function to the .val() method. La fonction que vous fournissez sera appelée une fois pour chaque élément et recevra la valeur actuelle du champ en tant qu'argument; quelle que soit la valeur que vous retournez sera définie comme valeur.

$(document).ready(function(){ 
 
    $('.date').val(function(i, oldVal) { 
 
    return $.format.date(oldVal, "MM/dd/yyyy hh:mm a"); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
</head> 
 
<body> 
 
    <div> 
 
    Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> 
 
    Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> 
 
    </div> 
 
</body> 
 
</html>

Source

2017-03-12 06:44:34 nnnnnn

Sélection du même élément en utilisant la classe dans JQuery

Répondre

Questions connexes