2015/02/24

日付入力UIがもっとオシャレに!『datedropper.js』の紹介

日付入力UIがもっとオシャレに!『datedropper.js』の紹介

日付の入力フォームはカレンダーを表示させたりするものが多いですが,今回紹介する『datedropper』は今までにないデザインでオシャレに表示・選択することが出来るようになります.

目次

入手方法

http://felicegattuso.com/projects/datedropper/にアクセスし,ページ上部にある『DOWNLOAD VERSION1.0』をクリックしてZIPファイルをダウンロードします.

設置方法

ダウンロードしたファイルを解凍し,iconsフォルダとCSSファイルJSファイルを同じディレクトリに置き,jQuery本体とともに読み込みます.

<script src="../jquery-1.11.0.js"></script>
<script src="js/datedropper.js"></script>
<link rel="stylesheet" type="text/css" href="js/datedropper.css">

さらに,input要素にIDを指定して設置します.

<input type="text" id="departure" />

最後に,IDを指定したinput要素に対して,JavaScriptでオプションを含めた処理を記述します.

$("#departure").dateDropper({
    format : "Y-m-d", // 年月日の形式
    lang : "en",// 言語
    placeholder : "init text", // 入力欄に表示される文字
    minYear : 1919, // 最小年
    maxYear : 2016, // 最大年
    animation : "bounce",// アニメーション種類
    color : "#f87a54", // 表示色(16進数指定)
    years_multiple : 10, // (複数年の範囲)
    animate_current : true, // 表示時のアニメーション
    lock : "from" // "from","to"のロック
});

サンプル

http://felicegattuso.com/projects/datedropper/の上部に(PCっぽいアイコンのモニタ部分をクリック)サンプルがあります.

まとめ

カレンダーを表示するだけの日付入力UIに物足りなさを感じていた方はぜひ使ってみてください.