BootstrapでjQuery UIのDatepickerを使う場合

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

datepicker02

日付の入力インターフェースとして、jQuery UIのDatepickerは、もはや常套手段いって過言ではないのではと個人的には思ってます。
どのように入力されるかわからない日付形式より、入力の手間も省け、定型で入力させるためによく使いますよね。

ところが、Twitter Bootstrapと同時に使おうとすると、ちょっと思ったインターフェースにならないことがあります。
たとえば、

このようにコーディングすると、

datepicker01

こんな感じにボタンが折り返されてしまいます。
これはjQuery UIで挿入されたボタン要素が「<span class=”input-group-btn”></span>」で囲まれていないために起こるようです。
ですので、上記のコーディングのJS部分を以下のようにすると正しく表示されます。

datepicker04

ついでにカレンダーアイコンに変更もしてやりました。

jQuery UIでボタンが挿入された時に、ボタンに「ui-datepicker-trigger」クラスが付与されているので、その要素にaddClassでBootstrapのボタンクラスを付けて、さらに内容をhtmlでアイコンに置き換えてます。
その後、全体を「<span class=”input-group-btn”></span>」で囲んでやることで実現してます。

これでインターフェースとしてわかりやすくなりますよね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。