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

2015.02.27   1423


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

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

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

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

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

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

datedropperプラグインのデモ


datedropperプラグインのページ


datedropperプラグインの使い方

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

HTMLコード


チェックポイント

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

CSSコード


チェックポイント

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

JavaScriptコード






チェックポイント

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

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

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

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

これもお好みでどうぞ!

プラグインへ一言

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

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

follow us in feedly

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