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. PreViewTube.js
  2. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  3. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  4. no-image
  5. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  6. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP