web-dev-qa-db-ja.com

有効な日付が設定されている場合でも、HTML-5日付フィールドはChromeで「mm / dd / yyyy」と表示されます

ASP.Net MVCアプリケーションをMVC-4にアップグレードしました。 DateTime値に基づく入力のフィールドエディターには、HTML-5 type="date"属性/値宣言が含まれるようになりました。

これで、Chromeで表示すると、入力フィールドに日付入力が「mm/dd/yyyy」と表示されます。

date field with 'mm/dd/yyyy' in box

値属性で正しい形式の日付を渡した場合でも：

<input value="2012/10/02" type="date"/>

入力ボックスに「mm/dd/yyyy」と表示されますが、ユーザーが手動で値を変更するまでそこにあります。

問題はChromeにあるようで、バックエンドフレームワークとは無関係です。実際にこの問題を確認してください： jsFiddle

...もちろん、レコードの編集には大きな問題です。ユーザーが既に有効な日付のあるレコードを取得した場合、フィールドをクリックして手動で値をリセットしない限り、送信時に検証に合格しません。

他のブラウザには問題ありません。

これはChromeバグですか？または、HTML-5日付フィールドが機能するはずの方法について何か見落としていませんか？

UPDATE
次の改訂フィドルをご覧ください。 http://jsfiddle.net/HudMe/5/ HTML-4とHTML-5の両方の日付入力があり、それぞれに「10/01/2012」がページ読み込みの値として設定されます。

いずれかの日付フィールドをクリックします。 Javascriptは、その要素のフィールドの値でアラートを表示する必要があります。

有効な日付がvalue属性で渡されているため、これには「10/01/2012」が表示されますが、Chromeでは、HTML-5日付フィールドには何も表示されません。この値を手動でリセットしてからもう一度クリックすると、表示されます。

HTML5フィールドの値は、Safari、Firefox、IEおよびOperaでのページロード後、調整なしで予想どおりに表示および警告されます。

受け入れられた答えに関する注意：
Asp.net mvc-4の他のユーザーの場合、ビューモデルのDateTimeフィールド宣言の[DisplayFormat]属性を使用して表示形式を調整できます。 （ https://stackoverflow.com/a/12634470/613004 にあります）

html5google-chrome
48
Faust

chromeで、必要な値を設定するにはYYYY-MM-DDこれが機能したためだと思います： http://jsfiddle.net/HudMe/6/

動作させるには、日付を2012-10-01に設定する必要があります

51
eric.itzhak

同じ問題がありました。同僚が jQuery.Globalize でこれを解決しました。

<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
    var lang = 'nl';

    $(function () {
        Globalize.culture(lang);
    });

    // fixing a weird validation issue with dates (nl date notation) and Google Chrome
    $.validator.methods.date = function(value, element) {
        var d = Globalize.parseDate(value);
        return this.optional(element) || !/Invalid|NaN/.test(d);
    };
</script>

日付の選択にjQuery Datepickerを使用しています。

3
Wim

2016-08-8のような値で同じ問題が発生していましたが、ゼロを追加して2桁の日を取得することで解決しました。 Chrome、Firefox、およびEdgeでテスト済み

today:function(){
   var today = new Date();
   var d = (today.getDate() < 10 ? '0' : '' )+ today.getDate();
   var m = ((today.getMonth() + 1) < 10 ? '0' :'') + (today.getMonth() + 1);
   var y = today.getFullYear();
   var x = String(y+"-"+m+"-"+d); 
   return x;
}
0
Ricardo Bandala

テーブルを処理していて、日付の1つがnullである場合、次のようにコーディングできます。

  @{
     if (Model.SomeCollection[i].date_due == null)
       {
         <td><input type='date' id="@("dd" + i)" name="dd" /></td>
       }
       else
       {
         <td><input type='date' value="@Model.SomeCollection[i].date_due.Value.ToString("yyyy-MM-dd")" id="@("dd" + i)" name="dd" /></td>
       }
   }
0
James

私は同じ問題を抱えており、シンプルなHTML、Javascript、CSSを使用した完全な日付ピッカーで以下に示す解決策を見つけました。このコードでは、dd/mm/yyyyのようにギ酸塩を準備しますが、任意に作業できます。

HTMLコード：

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

CSSコード：

#dt{text-indent: -500px;height:25px; width:200px;}

Javascriptコード：

function mydate()
{
  //alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}

出力：

enter image description here

0
ashish bhatt