web-dev-qa-db-ja.com

HTMLの日付入力タグに日付形式を設定する方法

Html <input type="date"></input>タグで日付フォーマットを設定することが可能であるかどうか私は疑問に思っています...私はそれをdd-mm-yyyyフォーマットで必要としていますが、現在はyyyy-mm-ddです。

htmldateinputformat
97
Piotr

hTMLのみを使用している場合は解決策はないと思います
jqueryを使うべきだと思います
適切なjqueryプラグインは jQuery Masked Input です。

20
gamehelp16

スタックオーバーフローについて同じ質問または関連する質問が見つかりました

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

出力：

enter image description here

10
ashish bhatt

あなたは違います。

まず、あなたの質問はあいまいです - ユーザーに表示される形式、またはWebサーバーに送信される形式のどちらを意味しますか。

ユーザーに表示される形式を意味するのであれば、これはエンドユーザーインターフェイスにあります。HTMLで指定したものではありません。通常、私はそれがオペレーティングシステムのロケール設定で設定されている日付フォーマットに基づいていると思います。表示形式は（一般的には）ユーザーのロケールに適した形式であり、ユーザーが日付の記述/理解に使用する形式であるため、独自の優先形式で上書きしても意味がありません。

あなたがそれがサーバに送信されるフォーマットを意味するならば、あなたは間違った問題を解決しようとしています。あなたがする必要があるのはyyyy-mm-ddフォーマットで日付を受け入れるためにサーバー側のコードをプログラムすることです。

9
Stewart

もしあなたがjQueryを使っているなら、これはいい単純な方法です。

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

あるいは、古い伝統的な方法があります。

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
5
sean.boyer

私が読んだ上記のものとは少し違う答えを思いついた。

私のソリューションは、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

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

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

Jquery DatePicker あなたは ローカライズ 、 date format ...を強制することができるので良い選択のようです。

1
Fifi
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
1
Dheeraj Rao

これが解決策です。

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

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

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

1
Muhammad Waqas

HTMLにはDD-MM-YYYYフォーマットの構文はありません。このページを参照してください http://www.Java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm 。多少それはあなたを助けます。そうでない場合は、JavaScriptの日付選択ツールを使用してください。

1
Rathika Jeganathan

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

1
Syntax Error

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"/>
1
Paul I.E

Mm-dd-yyyyでフォーマットする場合

aa = date.split（ " - "）

date = aa [1] + ' - ' + aa [2] + ' - ' + aa [0]

0
Abilash Raghu

短い直接答えは箱から出してそのままではないかではありませんが、私は日付入力をシミュレートし、あなたが望む任意のフォーマットを行うためにテキストボックスと純粋な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"を何か他のものに変更し、もちろんあなたが欲しい入力の名前を使ってくださいフォームを送信してください。

2番目の関数では、day + "/" + month + "/" + yearのように、day + "/" + month + "/" + yearの代わりに任意の形式を使用できます。テキスト入力では、プレースホルダーまたは値を次のように使用します。ページロード時のユーザーのyyyy/mm/dd。

0
shady
<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>
0
pala dattadri

依存関係のないクリーンな実装 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>
0
James Perih