HTML5で<input type=”date”>が実装されましたが、これの挙動がブラウザ依存でどんなフォーマットの日付が入力されるかが環境によって不安定だという問題があります。これを解決する方法としては、jQuery.UIのDatePickerを使う必要があるのですが、こいつがデフォルトでは英語なので日本語化する方法をメモしておきます。
DatePickerの導入方法は色々あるので検索するとして、読み込む必要があるのは以下のファイル。
- jquery-3.2.0.min.js （既に読み込んでいたら不要）
- https://jqueryui.com/download/ で「Datepicker」にだけチェックを入れてダウンロードして解凍。
- 中に入っているjquery-ui.min.js を<script>タグで読み込み。
- 中に入っているjquery-ui.min.css、jquery-ui.structure.min.css、jquery-ui.theme.min.cssを<link>タグで読み込み。
- 上記CSSの直下に中に入っているimagesフォルダを配置。
で、jQueryUIのオプションにいろいろ日本語を設定することで日本語化できます。
動作サンプルはこちら。
See the Pen DatePicker日本語化 by xnonce (@xnonce) on CodePen.
テキスト入力欄をクリックすると、日付入力欄が起動します。