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. no-image
  2. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  3. no-image
  4. FSVS(Full Screen Vertical Scroller)
  5. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP