基于日期添加课程时日期消失

Please see fiddle. (the alerts are just for info.)

请看小提琴。 (警报仅供参考。)

While using Chrome, the dates show up like mm/dd/yyyy (empty), but in IE they show correctly until moving on to the next.

在使用Chrome时,日期显示为mm / dd / yyyy(空),但在IE中它们显示正确,直到转到下一个。

The class is correct but the dates disappear.

班级是正确的,但日期消失了。

How can the dates be made to stay?

如何保留日期?

var now = new Date();
alert(now);
$('input[type=date]').val(function(i, v) {
  var myDate = new Date(v);
  if (now > myDate) {
    $(this).addClass('expired');
  }
  alert(myDate);
});

I've tried different date formats:

我尝试过不同的日期格式:

<tr id="1">
  <td>
     <input type="date" class="expiration-date" value="12-28-2017" />
     <input type="date" class="expiration-date" value="12/12/2017" />
     <input type="date" class="expiration-date" value="2016-02-21" />
  </td>
</tr>

CSS:

.expiration-date {
  color: green;
}

.expired {
  color: red;
}

Updated code works. Thank You for the "return v".

更新的代码有效。谢谢你的“回归v”。

1 个解决方案

#1

There are two issues in your code.

您的代码中存在两个问题。

1. The correct format for entering date value in <input type="date"> tag is yyyy-mm-dd. Rest of the formats won't work.

   在标签中输入日期值的正确格式是yyyy-mm-dd。其余格式不起作用。

   Click here for documentation.

   点击此处查看文档。

   One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.

   需要注意的一点是显示的日期格式与实际值不同 - 将根据用户浏览器的设置区域设置选择显示的日期格式,而日期值始终格式为yyyy-mm-dd。

2. The callback function inside .val() should return a value that will be set as the input tag value. In your code, that callback function returns nothing. Try replacing the code with following

   .val()中的回调函数应该返回一个值,该值将被设置为输入标记值。在您的代码中,该回调函数不返回任何内容。尝试使用以下代码替换代码

var now = new Date();
alert(now);
$('input[type=date]').val(function(i, v) {
  var myDate = new Date(v);
  if (now > myDate) {
    $(this).addClass('expired');
  }
  alert(myDate);
  return v;
});