datedropper_-_jQuery_Dates_Plugin

【jQuery】かわいいDatePickerをお探しならdatedropperプラグインがおすすめ

2015.02.27   732


みなさんはどんなDatePickerを使っていますか?
定番のjQueryUIだったり、Bootstrap-DatePickerだったり色々ありますが、今回紹介するのは「UXが大事なのは分かるけど、人と違ったかわいいDatePickerが使いたいんだ!」という方にぴったりなdatedropperプラグインです。

例えばレポートなどで範囲を指定して使用したいとかそういったことには不向きですが、ちょっとした日付を選択して欲しい!とか、サイトのかわいいデザインに合わせたい!とかそんな場合に重宝するDatePickerです。

しかも記事を作っている間にVersionが上がってすごい使いやすくなってる!!!

百聞は一見にしかず、です。まずはデモを見てみてください。

datedropperプラグインのオススメ/ポイント

  •   動きやデザインがかわいくておしゃれなDate Picker!
  •   オプションが分かりやすい
  •   スマホにも対応

datedropperプラグインのデモ


datedropperプラグインのページ


datedropperプラグインの使い方

それではdatedropperプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

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

チェックポイント

テキストフィールドに任意のIDを付ける。IDじゃなくてももちろん良いんだけどjQueryで指定する時に楽だからね。好みにお任せします。

CSSコード

<link rel="stylesheet" href="./datedropper.css">

チェックポイント

datedropperの本体CSSを読み込むだけ。

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- datedropper.js本体 -->
<script src="./datedropper.js"></script>
<script>
    $( "#departure" ).dateDropper({
        format:"Y-m-d",
        placeholder:"ここ押して日付選択して!",
        minYear:1970,
        maxYear:2015,
        animation:"bounce", // "fadein" or "bounce" or "dropdown"
        color:"#fd5925",
        years_multiple:10, // 年数変更幅
        animate_current:true, // カレンダー表示時に現在日付をアニメーションで表示するか
        lock:false, // "from" or "to" fromは過去は選べない。 toは未来を選べない。
        textColor:'#000000', // default
        bgColor:'#ffffff', // default
        borderColor:'#000000', // default
        borderRadius:8, // default
        boxShadow:"0 0px 0px 6px rgba(0,0,0,0.05)" // default
    });
</script>

チェックポイント

jQueryは必須です。
サンプルではgoogleホストを使用してjQueryを読み込んでますが、お好みでローカルから読み込んで下さい。

オプションはここに書かれているものが全てです。この中で分かりにくいものはyears_multipleですかね。years_multipleは下記の画像のように年数の下の部分をクリックした時の年数の移動幅です。

datedropperプラグインのデモページ

あと気になるのはanimate_currentですかね。これはカレンダー表示時に現在の日付をアニメーションで表示するかどうかなのですが、個人的にはfalseの方が良いかな?と思います。trueだとかわいいけど現在日付を表示するのに時間がかかるのでちょっと…というところがあります。

これもお好みでどうぞ!

プラグインへ一言

こういう遊び心たっぷりなやつ…好きです!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております