Input type = "date"フォーマットを変更する方法はありますか？
私は自分のウェブページ上でHTML5要素を扱っています。デフォルトでは、入力type="date"は日付をYYYY-MM-DDとして示します。
問題は、そのフォーマットを次のようなものに変更することが可能かどうかです。DD-MM-YYYY？
フォーマットを変更することは不可能です
私達は無線によるフォーマットとブラウザのプレゼンテーションフォーマットを区別しなければなりません。
ワイヤーフォーマット HTML5日付入力仕様 は RFC3339仕様を参照しています は、：yyyy-mm-ddに等しい全日付フォーマットを指定します。詳細についてはRFC3339仕様の セクション5.6 を参照してください。
表示形式 ブラウザは日付入力の表示方法に制限がありません。これを書いている時点で、Chrome、Edge、Firefox、およびOperaは日付サポートを持っています（ ここ を参照）。それらはすべて日付ピッカーを表示し、入力フィールドのテキストをフォーマットします。
入力フィールドのテキストのフォーマットはChrome内でのみ正しく行われます。 Edge、Firefox、およびOperaは、ロケールに合った正しい順序で日、月、および年の日付を表示しますが、たとえばダッシュ（30/01/2018）がロケールのカレンダー形式で予期される場合、矛盾したスラッシュ（30-01-2018）を使用します。
Internet Explorer 9、10、および11は、ワイヤー形式のテキスト入力フィールドを表示します。
この質問が行われて以来、Webの分野ではかなりのことが起こりました。最も興味深いのは、 Webコンポーネント の着陸です。今、あなたはあなたのニーズに合うように設計された カスタムHTML5要素 でこの問題をエレガントに解決することができます。 htmlタグの動作をオーバーライド/変更したい場合は、単にshadow domで遊んでください。
幸いなことに、すでにたくさんの定型句が用意されているので、最初から解決策を考え出す必要はないでしょう。 Just check 何を作っているのか、そこからアイデアを得てください。
あなたはこのようなタグを使うことを可能にするポリマーのための datetime-input のような単純な（そして実用的な）解決策から始めることができます：
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
あるいは、あなたが創造的でポップアップの完全な日付選択 あなたが望むようにスタイルを決められた 、あなたが望むフォーマットとロケール、コールバック、そしてあなたが自由に使える完全なカスタムAPIを持つことができます。 ！）
規格に準拠しており、ハッキングはありません。
利用可能なpolyfills 、what ブラウザ/バージョン をチェックして、それがあなたのユーザーベースの十分な％をカバーしているのなら…2018年です。
それが役に立てば幸い！
前述のとおり、形式を変更することは正式には不可能です。しかし、フィールドにスタイルを設定することは可能です。そのため（少しのJSの助けを借りて）、希望する形式で日付を表示します。日付入力を操作する可能性のいくつかはこの方法で失われます、フォーマットを強制したいという欲求がより大きい場合、このソリューションは方法であるかもしれません。日付フィールドは以下のようになります。
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
残りは少しCSSとJSです： http://jsfiddle.net/g7mvaosL/ /
これはデスクトップ用のChrome、およびiOS上のSafariでうまく機能します（タッチスクリーン上のネイティブの日付マニピュレータは他に類を見ないIMHOであるため、特に望ましいです）。他人をチェックしませんでしたが、どのWebkitでも失敗するとは思わないでください。
- RFC 3339/ISO 8601「ワイヤフォーマット」：YYYY-MM-DD。 HTML 5仕様によると、これはフォーム送信時またはDOM API経由で要求されたときの入力値に使用する必要がある形式です。ロケールと地域に依存しません。
- ユーザーインターフェイスコントロールによって表示され、ユーザー入力として受け入れられる形式。ブラウザのベンダーは、ユーザーの好みの選択に従うことをお勧めします。たとえば、[言語とテキスト]環境設定パネルで[アメリカ合衆国]という地域が選択されているMac OSでは、Chrome 20のフォーマットは "m/d/yy"です。
HTML5仕様には、どちらの形式をオーバーライドしたり手動で指定したりする手段は含まれていません。
私はブラウザがローカル日付フォーマットを使用すると信じています。変更することは可能だとは思わないでください。もちろんカスタムの日付選択を使うこともできます。
多くのハードルを経て、私はフォーマットを変更することを可能にする解決策を思いつきました。注意点がいくつかありますが、 'Jan'または '01'を常に表示したい場合に使用できます。 Firefoxはまだネイティブデートピッカーをサポートしていないため、WindowsとMac上のChromeでのみ動作します。
https://github.com/northamerican/custom-input-date-format
JS：
function updateDateInputs() {
$('input').each(function() {
var $date = $(this),
date = $date.val().split('-'),
format = ['year', 'month', 'day'];
$.each(format, function(i, v) {
$date.attr('data-' + v, +date[i]);
});
});
}
SASS：
$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
$i: index($months, $month);
input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after {
content: "#{$month}";
}
}
Google Chromeの最新のベータ版ではついに入力type=dateを使用し、形式はDD-MM-YYYYです。
そのため、特定のフォーマットを強制する方法があるはずです。私はHTML5ウェブページを開発しています、そして日付検索は今異なったフォーマットで失敗します。
試すこれが必要な場合クイックソリューション yyyy-mm-ddを "dd- Sep -2016"にするには
1）入力1スパンクラスの近くに作成します（ラベルとして機能）
2）ユーザーによって日付が変更されるたびに、またはデータからロードする必要があるときに、ラベルを更新します。
Webkitブラウザモバイル用およびIE11 +のポインタイベントにはjQueryおよびJquery Dateが必要
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});#date_input{text-indent: -500px;height:25px; width:200px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>たくさんの議論を読んだ後、私は簡単な解決策を用意しましたが、JqueryとCSSをたくさん使いたくはありません。
HTMLコード：
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
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;
}
出力：
ユーザーのコンピュータや携帯端末のデフォルトの日付形式を使用してWebキットブラウザを変更することはできません。しかし、あなたがjqueryとjquery UIを使うことができるならば、デザイン可能で、開発者が望むようにどんなフォーマットでも示されることができる日付ピッカーがあります。 jquery UIの日付選択ツールへのリンクはこのページにあります http://jqueryui.com/datepicker/ あなたはコードとドキュメンテーションまたはドキュメンテーションリンクと同様にデモを見つけることができます
編集： - 私はクロムがデフォルトでシステム設定と等しい言語設定を使用していることを見つけるが、ユーザーはそれらを変更することができますが、開発者はユーザーにそうすることを強いることはできませんJavascriptの日付選択ツールやjqueryの日付選択ツールなどのクエリを使用する
すでに述べたように、<input type=date ... >はほとんどのブラウザで完全には実装されていないので、ブラウザのようなWebキット（クロム）について話しましょう。
Linuxを使用して、環境変数LANG、LC_TIMEを変更することでそれを変更できます（少なくとも私にとっては）。
現在の値を見るために端末にlocaleをタイプすることができます。同じ概念がIOSにも適用できると思います。
例：を使う
LANG=en_US.UTF-8 /opt/google/chrome/chrome
日付はmm/dd/yyyyとして表示されます
使用方法
LANG=pt_BR /opt/google/chrome/chrome
日付はdd/mm/yyyyとして表示されます
http://lh.2xlibre.net/locale/pt_BR/ （自分のロケールでpt_BRを変更する）を使用して、独自のカスタムロケールを作成し、必要に応じて日付をフォーマットできます。
デフォルトのシステム日付の変更方法に関するより高度な参考資料： https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ および https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale
dateを使って本当の現在の日付フォーマットを見ることができます：
$ date +%x
01-06-2015
しかしLC_TIMEとd_fmtはchromeによって拒絶されているようです（そしてそれはwebkitかchromeのバグだと私は思う）、残念ながら動作しません： '（
それで、残念なことに、LANG環境変数があなたの問題を解決しないならば、残念ながら、まだ方法はありません。
私はそれが古い投稿であることを知っていますが、それはグーグル検索、ショートアンサーいいえ、推奨アンサーユーザーのカスタム日付ピッカー、私が使う正しい答えは日付入力をシミュレートし、あなたが望むフォーマットをすることです、これがコードです
<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">▼</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。
ブラウザは、ユーザーのシステム日付形式から日付入力形式を取得します。
（サポートされているブラウザ、Chrome、Edgeでテスト済み）
現在のところ、日付制御のスタイルを変更するための仕様によって定義された標準はないので、ブラウザで同じことを実装することは不可能です。
ただし、システム設定から日付形式を取得するというこの動作はより優れているため、これを上書きしないでください。その理由は、ユーザはシステム/デバイスで設定したものと同じ日付入力のフォーマットを見て、彼らが彼らのロケールに満足しているか、それと一致するかです。
覚えておいて、これはユーザーが見る画面上の単なるUIフォーマットであり、あなたのjavascript /バックエンドではいつでもあなたが望むフォーマットを保つことができます。