Clock Timepicker Plugin for jQuery

JavaScript

アナログ時計感覚で使えるタイムピッカー「Clock Timepicker Plugin for jQuery」

Clock Timepicker Plugin for jQueryは、アナログ時計感覚で使えるタイムピッカーを実装することができるjQueryプラグインです。Androidのタイムピッカーからインスパイアされています。直感的に時や分を決められるので、なかなか使いやすいですね。スマホとの相性もいいと思います。

Clock Timepicker Plugin for jQuery

デモ

デモページにはいくつかのサンプルが設置されています。例えば、上にあるスタンダードタイプのタイムピッカーをクリックしてみると、アナログ時計のようなものが表示されます。

外側には1〜12の数字が、内側には00と13〜23の数字が円形に並べられています。外側と内側を使い分けることで、午前・午後を明確にすることができますね。

時を選択したあとは、分を選択する画面が表示されます。こちらもアナログ時計のように5分単位で数字が並べられていますが、数値の指定は1分単位で行うことが可能です。

ほかにも、いくつかのサンプルが用意されているので気になる人はそちらもチェックしてみてください。

オプションもたくさん用意されていて、カラーやデュレーションなどいろんな項目のカスタマイズができるようになっています。

afternoonHoursInOuterCircle、autosize、colors.buttonTextColor、colors.clockFaceColor、colors.clockInnerCircleTextColor、duration、durationNegative、fonts.buttonFontSize、fonts.fontFamily、maximum、minimum、onChange、onClose、onOpen……など、ほかにもさまざまなオプション項目があります。

というわけで、アナログ時計のような感覚で使えるカスタマイズ性に優れたタイムピッカーを実装できるjQueryプラグイン「Clock Timepicker Plugin for jQuery」の紹介でした。

Clock Timepicker Plugin for jQuery

関連記事

  1. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  3. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  4. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  5. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP