日付に基づいてクラスを追加中に日付が消えます

Question

fiddleを参照してください。

Chromeを使用しているとき、日付はmm/dd/yyyy（空）のように表示されますが、IEでは次の日付に移動するまで正しく表示されます。

クラスは正しいものの、日付は消えます。

どのように滞在することができますか？

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); 
}); 

私が試した別の日付形式：

<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作品。 「返品v」をありがとうございます。

Answer 1

コードには2つの問題があります。

1. <input type="date">タグに日付値を入力するための正しい形式は、yyyy-mm-ddあります。残りの形式は機能しません。

   詳細については、hereをクリックしてください。注意すべき

   ことの一つは、表示された日付形式が実際の値と異なっていることである - 日付値は常にYYYY-MM-フォーマットされているのに対し、表示された日付の形式は、ユーザーのブラウザの設定ロケールに基づいて選択されますdd。

2. .val()のコールバック関数は、入力タグ値として設定される値を返す必要があります。あなたのコードでは、そのコールバック関数は何も返しません。グローバル変数としてnow` `

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; 
});