Blog

jQuery-Timepicker-AddonにDatepickerみたいなアイコンボタンを付ける方法

2014.11.25Cat:javascript jQuery デザイナー

jQueryのDatepickerに時間選択のUIを追加することができるのが、

jQuery-Timepicker-Addonです。

Datepickerの使い方やテーマをある程度引き継いでUIを追加できるので便利です。

 

ただ、jQuery-Timepicker-AddonではDatepickerで表示できるアイコンやボタンを表示させることができなくなります。

 

今回こちらを使うときに、デザイン的にアイコンがあったほうがよかったので、

このアドオンにDatepickerのような画像アイコンやボタンを追加する方法について考えてみましたので、

ご紹介いたします。

 

↓こちらがDEMOです

DEMO 

 

方法

jQuery-UIjQuery-Timepicker-Addonを設置する。

それぞれの公式サイトから必要なJSやCSSなどをダウンロードして、設置し、

読み込みます。

 

 

jQuery-Timepicker-Addonを編集して、オプションを追加する

jquery-ui-timepicker-addon.jsの一部を編集します。まず、以下のコードを探します。

 

ここの最後のところに、以下のようにコードを追加します。

 

つぎにこのすぐ下にある以下のコードを探します。

 

ここの最後のところに、以下のようにコードを追加します。

 

最後に以下のコードを探します。

ここの後に以下のコードを追加します。

これで編集は完了です。

jQuery-Timepicker-Addonを実行する

ボタン付きのアイコンを追加するときは以下のコードで、

 

画像だけのアイコンを追加するときは以下のコードを追加します。

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ