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

no-image

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」の紹介でした。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives