no-image

JavaScript

マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

MDTimePickerはマテリアルデザインをコンセプトにしたタイムピッカーを実装できるjQueryプラグインです。AM、PM、デジタル、アナログとシンプルながらも必要最低限の情報をしっかりと把握しやすくなっています。フォーマットやテーマなどもオプションを用いることでカスタマイズが可能です。

AM・PMの操作も簡単

MDTimePicker

デモ画像にはアナログとデジタルの両方の時計が表示されていて、AMとPMを選択できるボタンも設置されています。とてもシンプルなデザインなので、操作も簡単に行えますね。

使い方に関しても特に難しい設定もなく、すんなり実装できると思います。mdtimepicker.cssとmdtimepicker.jsを読み込み、timepickerというid名を付与したinput要素(typeはtext)を記述します。

$(document).ready(function(){
    $('#timepicker').mdtimepicker();
});
  • timeFormat
  • format
  • theme
  • readOnly
  • hourPadding

各オプションのデフォルト値は、timeFormatが’hh:mm:ss.000’、formatが’h:mm tt’、themeが’blue’、readOnlyがtrue、hourPaddingがfalseです。

ちなみにフォーマットについてですが、hが12時間形式でhhが24時間形式、`mmが30、tがamでttがAMといった感じになります。

そのほか、定義済みのテーマは、red、blue、green、purple、indigo、tealです。デフォルトのテーマはblueですが、変更したい場合はこの中から好きな値を指定してあげればOKです。もしテーマを指定しなかったり、ここにはないテーマが指定されたりした場合はデフォルトのテーマが採用されるとのこと。

というわけで、マテリアルデザインによるシンプルで操作性も簡単なタイムピッカーを実装できる「MDTimePicker」の紹介でした。

ListtリストをiOSのようにアニメーションできるjQueryプラグイン「Listt」前のページ

多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」次のページno-image

関連記事

  1. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. Filterable Product Grid
  4. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  5. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  6. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP