bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptマテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」JavaScript2018.07.19マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」MDTimePickerはマテリアルデザインをコンセプトにしたタイムピッカーを実装できるjQueryプラグインです。AM、PM、デジタル、アナログとシンプルながらも必要最低限の情報をしっかりと把握しやすくなっています。フォーマットやテーマなどもオプションを用いることでカスタマイズが可能です。以下のページからMDTimePickerの詳細やダウンロードが可能です。デモ画像も用意されています。MDTimePickerデモ画像にはアナログとデジタルの両方の時計が表示されていて、AMとPMを選択できるボタンも設置されています。シンプルなデザインなので、操作も簡単に行えますね。使い方に関しても特に難しい設定もなく、すんなり実装できると思います。mdtimepicker.cssとmdtimepicker.jsを読み込み、timepickerというid名を付与したinput要素(typeはtext)を記述します。あとは下記のようにタイムピッカーを初期化してあげれば完了です。$('#timepicker').mdtimepicker();});オプションには下記の項目が用意されています。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」の紹介でした。複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「...JavaScriptスマホやPCで多階層メニューを実装できるレスポンシブ対応のjQueryプラグイン「slimMenu」...slimMenuというjQueryプラグインを使えば、スマホやPCの両...JavaScript画像にホバーして拡大できる軽量のスクリプト「Drift」Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。