Question

我的应用程序中有很多日期字段。 ID无法提供帮助，我想使用类格式化日期字段。在尝试格式化日期时，Holder2日期也更改为Holder1的日期，PFB

＆＃13;

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

＆＃13;

<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>

＆＃13;

当前输出： 持有人1：02/06/2017 12:30 AM 持有人2：02/06/2017 12:30 AM

预期输出 持有人1：02/06/2017 12:30 AM 持有人2：03/12/2017 11:06 AM

PS：类型被称为文本，因为如果提到日期，Chrome会显示自己的日期选择器。我的自定义日期选择器和chrome都是同时加载的。请帮帮我。感谢。

Answer 1

在文档中有使用css类的格式。 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>

Answer 2

$('.date')选择器会将更改应用于与该选择器匹配的所有jQuery元素，但会从匹配查询的第一个元素中获取val。要从您要格式化的元素中获取val，您可以使用jQuery＆＃39; .each()以及$(this)来确保您定位当前匹配的元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您需要一次执行一个元素，可以使用.each()循环执行，或者更方便地通过providing a callback function to the .val() method执行。您提供的函数将为每个元素调用一次，并将接收字段的当前值作为参数;您返回的任何值都将设置为值。

$(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>

Answer 4

你不能这样做，因为最后你看到所有输入都有相同的结果，实际上第一个结果被添加到所有输入。

你应该使用each()

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

在JQuery中使用类选择相同的元素

4 个答案: