JavaScriptで簡単設置！スマホ対応カレンダー入力UI｜mamcalendar.js
日付入力をカレンダーUIで行いたいけれど、jQueryや重いライブラリは使いたくない──そんな方に最適なのが、軽量で簡単に設置できるJavaScript製のカレンダー入力ダイアログ「mamcalendar.js」です。
このページでは、スマートフォンにも対応したカレンダーUIを、input要素にクラスを付けるだけで実装する方法を、使用例付きでわかりやすく解説します。
input type="date"を使うと、PC・Android・iPhoneで見た目がバラバラになりますが、input type="text"としてmamcalendar.jsを使うと統一出来ます。
readonly属性によるソフトウェアキーボードの抑制や、設置のポイントも紹介しています。
■使い方
mamcalendar.js(17KB)ダウンロード-
上記ボタンを押してmamcalendar.jsをダウンロードします。
- mamcalendarを使いたいファイルで、
<script src="./js/mamcalendar.js"></script>
のように、相対又は絶対パスでmamcalendar.jsを指定します。
-
クラス名に"mamCalendar"を指定したinputエレメント(type="text")を設定します。
<input type="text" class="mamCalendar" />
- ブラウザで開いてテキストボックスをクリックしたりタップするとカレンダー ダイアログが開きます。
■使用例
<script src="./js/mamcalendar.js"></script> <input type="text" class="mamCalendar" placeholder="yyyy/mm/dd" />
スマートフォンなどで、オンスクリーンキーボード（ソフトウェアキーボード）を表示したくない場合は、readonly 属性を追加してください。
<script src="./js/mamcalendar.js"></script>
<input type="text" class="mamCalendar" placeholder="yyyy/mm/dd" readonly="readonly" />