Railsのdatetime_selectってなんとかならないかなって思ってあれこれ試してた

この手の記事を書くのは久しぶりですね。

Bootstrap3に乗り換えると困ったのがdatetime_selectやdate_selectで生成した日付の入力欄。
Bootstrap3はフォームの入力欄のサイズをその外側にあるタグで設定するので厄介者です。

<div class="col-lg-4">
  <input type="text" class="form-control">
</div>

まあこんな感じです。ところがRailsのdate_selectなんかはそんなものなどお構いなしにselectタグを作ってくれます。HTML5で新しくできたフォームの種類の中には、日付をカレンダーで入力するコントロールがありますが、実はこれ、対応ブラウザの種類がいまいち少なくてまだ使い時ではない感じです。なので仕方なくこちらを使っていますが、今度は囲みタグをどうやって作るかが問題。ここだけ独自にスタイルを書くのも難しい話なので、なんとかして同じようにタグでかこってやる必要があります。

これが解決策？

たぶんすでに対応するためのGemがあるのかもしれませんが、それを使わずにやる方法はこちら。

<%
year  = %(<span class="input-group-addon">年</span></div><div class="col-xs-4 input-group">)
month = %(<span class="input-group-addon">月</span></div><div class="col-xs-4 input-group">)
%>
<%= sprintf(%(<div class="col-xs-4 input-group">) + (p.date_select :date, { use_month_numbers: true, start_year: Date.today.year - 60, end_year: Date.today.year, date_separator: "%s" }, class: "form-control") + %(<span class="input-group-addon">日</span></div>), year, month).html_safe %>

これで3等分できます。どうしても「年」「月」「日」の文字を入れたくてあれこれ試した結果こうなりました。

種明かし

date_selectのオプションにdate_separatorというものがあります。これを使うとセレクトボックスの間に入れる文字を設定できます。そこに%sを設定していますが、この結果で来た文字列をフォーマット文字列として、今度は区切り文字のところに入れる文字列をあとから設定して、できたものをhtml_safeで変換しておしまい、というわけです。めんどくさことこの上ないので、たくさん日付を入力するところをがあるときはヘルパーかなにかにしておくことをお勧めします。