timedropper-1

さまざまなWebサービスやサイトなどで、ユーザーに「時間(時刻)」を入力してもらうケースは多いかと思います。

そこで、PCはもちろんですが、スマホでの操作にも最適化されたお手軽なjQueryプラグイン【timedropper】が公開されているのでご紹介しようと思います。

見た目にもオシャレなUIで、直感的な「時間入力」が出来るので使っていて楽しいプラグインになっています。


使い方!

利用方法はシンプルで、専用のcss/jsファイルを読み込むだけでOK!

公式サイトからダウンロードするか、以下のURLからすぐに試すこともできますよ。

//CSSファイル
http://felicegattuso.com/projects/timedropper/js/timedropper/timedropper.css

//JSファイル
http://felicegattuso.com/projects/timedropper/js/timedropper/timedropper.js

あと、当然ですが「jQuery」も読み込んでおきましょう。


そして、HTMLに通常通り「時間入力」用の「inputタグ」を配置します。

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

ID属性は好きなキーワードで構いません。(今回は「timeSection」としました…)


あとは、以下のJavaScriptコードを1行追加するだけで完成です!

$( "#timeSection" ).timeDropper();

先ほど設定したID属性を指定して、「timeDropper()」を実行させるだけのシンプルな構造ですね。


以下のサンプルデモにある「入力ボックス」をクリック(タッチ)してみてください。(スマホの方はコチラからどうぞ)

See the Pen timedropper.jsサンプル by webhacck (@webhacck) on CodePen.


クリック(タッチ)すると、時間を入力するための「専用UI」がポップアップ表示されます。

timedropper-2

バーのような箇所をグリグリいじることで、時間を直感的に変更できるのが分かると思います。また、「時」「分」をクリック(タッチ)することで、それぞれの時刻を調整することが出来るようになっています。


オプションを変更してみよう!

「timedropper」はデフォルトでも十分に利用できますが、自分好みにカスタマイズできるオプションも用意されています。

例えば、「format」を設定すれば「12時間/24時間」の表示を変えたり、「1」「01」のように「0」を付けるかどうかの細かい部分まで調整できます。

また、「mousewheel」を設定すると、PCの場合にマウスホイールと連動して時間設定ができるようになります。


以下に、全オプションの設定項目を記載しておきます!

$( "#alarm" ).timeDropper({

  //機能オプション
  autoswitch: false,          //クリック位置移動
  meridians: false,           //12時間 / 24時間表示
  format: "h:mm a",           //時刻フォーマット
  mousewheel: false,          //マウスホイール可否
  init_animation: "fadeIn",   //初期アニメーション
  setCurrentTime: true,       //現在時刻の設定

  //スタイルオプション
  primaryColor: "#1977cc",    //設定中の文字
  textColor: "#555555",       //設定後の文字
  backgroundColor: "#ffffff", //背景
  borderColor: "#1977cc"      //枠線

});

カラーもカスタマイズ出来るので、自分のWebページに合わせたカラーに変更すれば親和性も高くなるでしょう。

ちなみに、「日付」に特化した専用プラグインも同じ開発者が公開しているので、こちらも合わせて利用するとさらに楽しいサイトに仕上がると思います。

「timedropper」公式サイト