Selecting same element using class in JQuery
Question
I have lot of date fields in my application. IDs can't help, I want to format date fields using class. While trying to format the date, Holder2 date is also changed to Holder1's date, PFB
$(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>
Current Output: Holder 1: 02/06/2017 12:30 AM Holder 2: 02/06/2017 12:30 AM
Expected Output: Holder 1: 02/06/2017 12:30 AM Holder 2: 03/12/2017 11:06 AM
PS: type is mentioned as text because if mentioned as date, chrome shows its own datepicker. Both my custom datepicker and chrome's are loaded at the same time. Help me out please. Thanks.
4 answers
solution1
1 ACCPTED 2017-03-12 06:42:08
there is a formatting using css classes right in the 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>
solution2
1 2017-03-12 06:43:52
The $('.date') selector will apply the change to all jQuery elements matching that selector, but will get the val from the first element matching the query. To get the val from the element you'll be formatting, you can use jQuery's .each() , along with $(this) , to make sure you're targeting the current matched element.
$(document).ready(function(){ $('.date').each(function() { $(this).val($.format.date($(this).val(), "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>
solution3
1 2017-03-12 06:44:34
You need to do the elements one at a time, which you can do with an .each() loop, or, more conveniently, by providing a callback function to the .val() method . The function you provide will be called once for each element, and will receive the current value of the field as an argument; whatever value you return will be set as the value.
$(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>
solution4
0 2017-03-12 06:43:33
you can not do like this, because at end you see the all inputs have same result, in fact the first result added to all inputs.
you should use each()
$('.date').each(function(index){
$(this).someMethod()
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.