HTML日付入力タグで日付形式を設定するにはどうすればよいですか？

105

html <input type="date"></input>タグで日付形式を設定できるかどうか疑問に思っています...現在はyyyy-mm-ddですが、dd-mm-yyyy形式で必要です。

html  date  input  format 
— ピオトル
ソース
3
HTML5入力タイプ=日付の値出力の指定の重複の可能性はありませんか？？私は、言うこの質問ここでは、より良い1その古いよりも求められているが、それより古い 1はかなり良い答えを持っています。
— Arsen7
— Vaibhav Mule、2016
私の国設定はオランダ語で、ChromeではDD-MM-YYYYと表示されています。それはウェブサイトを使用しているクライアントのウィンドウ設定に依存しているようです。
— dark_passages

回答:

11

あなたはしません。

まず、質問があいまいです。ユーザーに表示される形式ですか、それともWebサーバーに送信される形式ですか。

ユーザーに表示される形式を意味する場合、これはHTMLで指定するものではなく、エンドユーザーインターフェイスにまで及びます。通常は、オペレーティングシステムのロケール設定で設定されている日付形式に基づいていると思います。表示される形式は（一般的に言えば）ユーザーのロケールに適した形式であり、ユーザーが日付の書き込みや理解に使用する形式であるため、独自の優先形式で上書きしようとしても意味がありません。

それがサーバーに送信される形式を意味している場合は、間違った問題を修正しようとしています。あなたがする必要があるのは、yyyy-mm-dd形式の日付を受け入れるようにサーバー側コードをプログラムすることです。

— スチュワート
ソース
残念なことに、2番目のコメントは現実の世界ではまったく当てはまりません。ChromeやOperaなどの一部のブラウザーは、エンティティの順序を尊重しますが、それ以外のものはありません。例えば、私のOSのロケール設定は、短い日付として、8月の最初の日が今年はあるべきことを指定1/8から2016、それでもChromeとOperaは表示し2016年1月8日に。SafariやFirefoxなどの他のブラウザー（少なくともOS Xでは）はOS設定を完全に無視し、何があっても常に2016-08-16を表示します。ユーザーが独自の日付設定を設定できるサイトでは、これをオーバーライドすることは確かに意味があります。
— Janus Bahsジャケット
（FirefoxとSafariについての注意を無視してください...疲れました。どちらのブラウザーも日付タイプをサポートしていないため、値の基本フォーマットを表示しています。現在のコードの場合、YYYY-MM-DDです。 。）
— Janus Bahs Jacquet 2016
ほとんどの人は、ユーザーが自分の好みを設定できるようにしたり、自分の好みの日付形式を世界中に与えたりしたいので、表示/入力日付形式を変更する方法を尋ねていますか？後者は、私が言ったように誰もすべきではないことですが、前者が適切であるかどうかについてはどちらの方法でも議論できます。ただし、これはプレゼンテーション設定であるため、HTMLの範囲外です。
— Stewart
問題は、設定できないプレゼンテーション設定であることです。一般に、プレゼンテーション設定はCSSに属していますが、CSS（または他の場所）でこれを変更する方法はありません。その上、HTML仕様自体でさえ、プレゼンテーションの設定から自由ではありません。たとえば、上のセクションでinput[type=password]は、「ユーザーエージェントが値を覆い隠して、ユーザー以外の人がそれを見ることができないようにする」と述べています。これは、ユーザーエージェントが特定の方法で日付を提示する必要があると言っているだけの表現です。
— Janus Bahsジャケット
1
設定できないのは良いことだと言う人もいます。ウェブマスターが自分の好みの日付形式を世界中に適用するのを防ぐためです。しかし、パスワードの入力は私に考えさせられました。多くの場所で、HTML仕様は表示に関する推奨事項を提供します。これは、基本的にブラウザーのデフォルトスタイルシートの推奨事項です。ここでの違いは、この特定の表示アスペクトにはCSSプロパティがないように見えることです。
— スチュワート
11

Stackoverflowで同じ質問または関連する質問が見つかりました

input type =“ date”形式を変更する方法はありますか？

簡単な解決策が1つ見つかりました。特定の形式を指定することはできませんが、このようにカスタマイズできます。

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

出力：

ここに画像の説明を入力してください

— アシシュ・バット
ソース
さらに良い-cssを使用して、通常の入力に対して透過的な日付コントロールを配置する
— George Mauer
返信ありがとうございます。リンクまたはコードがある場合は、更新する必要があります
— ashish bhatt 2015年
これは素晴らしいオプションです。
— ディロンバーネット
CSSやJavaScriptではなく、HTML（質問に基づく）でそれが可能かどうかを尋ねていると思います。
— 静倉
6

jQueryを使用している場合、ここに素敵なシンプルな方法があります

$("#dateField").val(new Date().toISOString().substring(0, 10));

または、古い伝統的な方法があります：

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— sean.boyer
ソース
4

なぜhtml5日付コントロールをそのまま使用しないでください。日付タイプをサポートするブラウザーで正常に動作し、まだ日付タイプをサポートしていないFirefoxなどの他のブラウザーでも機能する他の属性があります。

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>
— ポールIE
ソース
<pre> <input type = "text" name = "input1" placeholder = "YYYY-MM-DD"必須パターン= "[0-9] {4}-[0-9] {2}-[0-9 ] {2} "title ="このフォーマートYYYY-MM-DDに日付を入力してください "/> </ pre>
— Paul IE
8
要件は明らかに、「dd-mm-yyyy形式で必要です」と引用しました。これはどのように役立ちますか？
— HarijsKrūtainis2016年
1
Firefoxでは動作しません。このhtmlは、mm / dd / yyyyのプレースホルダーを持つ入力を示しています。私のウィンドウとFirefoxはどちらも第一言語としてオランダ語が設定されています。Windowsの地域設定で短い日付が表示されます：30-11-2018。
— Roland
1

はっきりとはわかりませんが、ユーザーの日付と時刻の設定に基づいてブラウザーで処理されるはずです。日付をその形式で表示するようにコンピューターを設定してみてください。

— 構文エラー
ソース
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— デーラジ・ラオ
ソース
3
このコードスニペット、ありがとうございます。適切な説明は、なぜこれが問題の優れた解決策であるかを示すことにより、教育的価値を大幅に向上させ、同様の、しかし同一ではない質問を持つ将来の読者にとって、より有用になるでしょう。回答を編集して説明を追加し、適用される制限と前提を示してください。
— Toby Speight 2017
1

私は多くの研究を行いましたが、のフォーマットを強制することはできないと思います<input type="date">。ブラウザーはローカル形式を選択し、ユーザー設定に応じて、ユーザーの言語が英語の場合、日付は英語形式（mm / dd / yyyy）で表示されます。

私の意見では、最良の解決策はプラグインを使用して表示を制御することです。

ローカリゼーション、日付形式を強制できるので、jquery DatePickerは良いオプションのようです ...

— フィフィ
ソース
1

私はこれまで読んだものとは少し違う答えを思いつきました。

私のソリューションでは、少量のJavaScriptとHTML入力を使用しています。

入力によって受け入れられた日付は、「yyyy-mm-dd」としてフォーマットされた文字列になります。これを分割して、新しいDate（）として適切に配置できます。

基本的なHTMLは次のとおりです。

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

基本的なJSは次のとおりです。

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

日付は好きなようにフォーマットできます。新しいDate（）を作成し、そこからすべての情報を取得できます。または、単に「userDate []」を使用して文字列を作成します。

「new Date（）」に日付を入力するいくつかの方法では、予期しない結果が生じることに注意してください。（つまり-1日遅れ）

— thielr7
ソース
1 
<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>
— パラダッタドリ
ソース
2
ここにHTMLコードを投稿する場合、それをコードとしてフォーマットすることが非常に重要です。そうしないと、ページの一部としてフォーマットされ、回答が回答のように見えません。書式設定の方法がわからない場合は、ヘルプセンターのガイドを
— Zoe
0

短い直接回答はありませんか、箱から出していないですが、テキストボックスと純粋なJSコードを使用して日付入力をシミュレートし、必要な任意の形式を実行する方法を考え出しました。これがコードです。 

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1-このメソッドは日付タイプをサポートするブラウザでのみ機能することに注意してください。

2- JSコードの最初の関数は、日付タイプをサポートせず、外観を通常のテキスト入力に設定するブラウザー用です。

3-このコードをページの複数の日付入力に使用する場合は、関数呼び出しと入力自体の両方でテキスト入力のID「xTime」を別のものに変更し、もちろん、必要な入力の名前を使用してくださいフォーム送信。

4番目の関数では、day + "/" + month + "/" + yearたとえば例year + "/" + month + "/" + dayの代わりに任意のフォーマットを使用でき、テキスト入力ではプレースホルダーまたは値を次のように使用しますページの読み込み時のユーザーのyyyy / mm / dd。

— 怪しい
ソース
-1

依存関係のないクリーンな実装。https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>
— ジェームス・ペリ
ソース
-2

これが解決策です： 

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

うまくいけば、これは問題を解決します:)

— ムハンマドワカス
ソース
1
あなたのソリューションは日付タイプのHTML入力を利用しないので、実際には質問に答えません。
— ビンセント
タイプを日付に設定する必要はありません。datepickerの場合、日付なしで機能します。試してみてください。うまくいけば問題が解決します。
— ムハンマドワカ
-3

日付値の形式は'YYYY-MM-DD'です。次の例を参照してください

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

必要なのは、日付をphp、asp、rubyなどの形式にすることです。

— チャーミ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.