「予約希望日」など、フォームで日付を指定する機会はよくあります。しかし、ドロップダウンなどで選んでもらうと、「次の日曜日に」といったような指定がしにくい上、「2月 31日」など日付として不正なものが指定されるなどして、いろいろと面倒です。

そこで、JavaScriptでカレンダーを表示して日付を選ばせる方法があります。
『protocalendar.js』もその一つ。Yahoo! UI Libraryなどでも同種のものはありますが、ここで紹介するのは日本の方が日本向けに作成したカレンダー。祝祭日などもしっかり日本向けになっているため、非常に使いやすいと言えます。

使い方も、ライブラリをダウンロードして参照した後、次のように組み込むだけ。

<input id="simple_calendar" name="simple_calendar" type="text" /><br />
<script type="text/javascript">
InputCalendar.createOnLoaded('simple_calendar');
</script>

id属性を付加したテキストフィールドに、「InputCalendar.createOnLoaded」でidを指定するだけで、図のようなカレンダーが表示されます。
さらに、さまざまなカスタマイズを加えることもできるので、次のページなどを参考にして使い込んでみましょう。

»protocalander usage

MITライセンスで自由に利用でき、日々バージョンアップされているので、是非便利に使ってみましょう。

»スプーキーズラボブログ | シンプルな日時選択ライブラリ protocalendar.js v1.1.1 を公開しました

Tweet