HTML5 inputタグの日付入力(type="date")で区切り記号を変更したい。

HTML5 inputタグの日付入力(type="date")の区切り記号は標準では「/(スラッシュ)」ですが、
これを日本語表記に変えたいのですが、どうすればよろしいのでしょうか。

2017/10/07 → 2017年10月07日に変更したいのです。

ページ内で「input type="date"」と「input type="month"」の両方を使用していますが
それぞれの表示が「input type="date"」は「2017/10/07」であり、「input type="month"」は
「2017年10月」と違っているため双方を揃えたいと考えています。
ですので、「2017/10/07 → 2017年10月07日に変更したい」と言っていますが、「input type="month"」を
「2017/10」とするのでも良いとも思っていますが、どちらかと言うと「2017/10/07 → 2017年10月07日」
に変更したいです。

どなたかお助け下さい。

【開発/動作環境など】
動作対象ブラウザ：Chrome
動作対象OS：Windows7, 10
開発言語：PHP, javascript, jQuery

行動規範の内容に同意します

回答2件

ベストアンサー

残念ながら、<input type=date>の書式はブラウザ、言語設定に依存するものなので、確実に制御する方法はありません。

どうしても書式にこだわるなら、JavaScriptでウィジェットを作るほかなさそうです。

投稿2017/10/07 05:54

maisumakun

総合スコア145183

matsurugi

2017/10/13 14:38

ありがとうございます。やはり作り込みが必要なんですね。チャレンジしてみます。

行動規範の内容に同意します

現状ではフォーマットを指定する方法はありませんが、JavaScriptとCSSによって見た目を変更する方法がありました。
https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format
http://jsfiddle.net/g7mvaosL/

別解として、Chrome限定かつ月の後ろにも／が出てしまうものも挙げておきます。

CSS
1input[type="month"]::-webkit-datetime-edit-text {
2  display: inline-block;
3  width: .9em;
4  background: linear-gradient(to right bottom, #fff, #fff 48%, #000 48%, #000 52%, #fff 52%);
5  color: transparent;
6}
7