概要

カレンダーから日付を入力できるプラグイン「DatePicker（デートピッカー）」をご紹介します。
実際のカレンダーを模して作られている為、ユーザーが直感的に日付を選択することが可能になり、
日付を入力する欄がある場合に是非導入しておきたいプラグインです。

デモ

デートピッカーは様々な開発者からリリースされており、
今回は fengyuanchen氏 が開発されたプラグインのご紹介となります。 下記から動作を確認できます。

See the Pen DataPicker by atp92neics (@atp92nesics) on CodePen.

使用方法

以下のファイルを読み込んでください。

<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.ja-JP.js"></script>

読み込み後、有効にしたいinput要素に data-toggle="datepicker" を追加してください。
キーボードからの入力ができないように readonlyをつけておきましょう。

<input type="text" data-toggle="datepicker" readonly>

続いてJavascriptの記述です。オプションなしで使用したい場合は、

$('[data-toggle="datepicker"]').datepicker();

これだけで使用可能になります。
言語は標準だと英語が使用されていますが、言語ファイルを読み込むことで日本語にすることも可能です。

<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.ja-JP.js"></script>
});

$('[data-toggle="datepicker"]').datepicker({
  language: 'ja-JP'
});

DataPicker.jsの後に言語ファイルを読み込むようにしてください。こうしないと動作しません。
また、言語ファイルを読み込みしてもJavascriptで言語を指定しないと反映されないので、注意してください。

その他、様々なオプションが用意されていますので、
下記のGithub、もしくは公式サイトのドキュメントをご覧ください。

Github
公式サイト