Home –  TwitterBootstrap
Tag Archives: TwitterBootstrap

TwitterBootstrapとDatePicker

最近書くのサボりまくりなので頑張って書いてみますアタヽ(д`ヽ彡ノ´д)ノフタ

最近TwitterBootstrapを使うようになったわけですが、日付入力でいいものがないかと思っていました。

いわゆるカレンダーからの入力が出来るといいよね!
ということでDatepickerで検索してみると・・・・・。

そしたらDatepicker for Bootstrapというのが見つかりました。

このDatePickerですが、なんか日本語使えないし初期値は1970-01-01だし使い勝手わるーーいヽ(`Д´)ノプンプン
と思ってたんですが、よくよく調べてみると、この公式ページ(?)より新しいものがGitHubにあるようですな。

 https://github.com/eternicode/bootstrap-datepicker

こちらのURLではあるのですが・・・・。
こちらに登録されている最新ソースだと

  • 日本語の設定がある
  • 初期値が今日
といった困った事が解決しているのです(・∀・)ニヤニヤ
うっかり公式ページからダウンロードすると古いものっぽいので自分が忘れないようにと日記を書いてみました。
$().ready(function(){
  $("input[id='hoge']").datepicker({format: 'yyyy/mm/dd', language: 'ja'});
});
んで、カレンダー入力にしたいINPUTは上の様にしてあげればよいと思います

Twitter Bootstrapとwill paginate使うとしょんぼり

http://www.slideshare.net/rosylilly/twitter-bootstrap-intro

↑のスライドを見ました。
「プログラマーはダサい。今やこれは常識!!」・・・・はい、マジでそう思います。すくなくても私はダサい!!!

ということで今作っているプログラムに導入してみました。twitter-bootstrap-railsというのを使って割りとちょちょいのちょいで入れることが出来ました。。。がそこにwill paginateが邪魔をしてくれました。

そう、表示が崩れてしますのです。

幸いなことに既に同じ状況で困っている方もおり、まとめておられました。

とりあえず、こちらのページをご案内(´・ω:;.:…
http://d.hatena.ne.jp/CortYuming/20120131/p1

残念な事にうちの環境では微妙に上手く表示されません。そこで出力するタグを修正することにしました。先程のページの設定(特にCSS)は入れたあとで下記のようなクラスを作成します。

twitter bootstrapでは<ul><li>を使ってページ番号を表現するようですのでそのようにしていきます。

class BootstrapPaginationRenderer < WillPaginate::ActionView::LinkRenderer   private      def previous_or_next_page(page, text, classname)       link(text, page, :class => classname)
  end

  public
  # method as you see fit.
  def to_html
    html = pagination.map do |item|
      tag(:li,
        ((item.is_a?(Fixnum))?
          page_number(item) :
          send(item)))
    end.join(@options[:link_separator])

    html = tag(:ul, html)

    @options[:container] ? html_container(html) : html
  end

end

このクラスを作ったのちにwill paginateを使う部分では例えばこんな感じに作ったクラスを使用するようにします。

<%= will_paginate @results, :renderer => BootstrapPaginationRenderer %>

私の環境ではこれで問題なく表示されるようになりました。