今天做Rails百宝箱第二集
首先学的就是学选时间的UI
一般的编辑时间的代码是：
<%= f.date_field :birthday, :class => "form-control" %>
但是这种菜单的支持的浏览器只有Chrome
或者用下拉的菜单：
<%= f.date_select :birthday, :class => "form-control" %>
这种下拉的菜单就没有兼容性问题，但是就是有点丑，而且没有日历。
如果想要用漂亮的日历，就要用gem 个 bootstrap-datepicker
bootstrap-datepicker是个 jQuery Plugin，并且有现成包好的 gem 可以直接使用bootstrap-datepicker-rails。
编辑Gemfile
Gemfile
+ gem 'bootstrap-datepicker-rails'
执行bundle后，重启服务器
编辑app/assets/stylesheets/application.scss
app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
@import "select2"; @import "select2-bootstrap";
+ @import "bootstrap-datepicker3";
编辑app/assets/javascripts/application.js
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require select2
//= require nested_form_fields
+ //= require bootstrap-datepicker/core
+ //= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN//= require_tree .
编辑app/views/users/edit.html.erb，将 script 放到最下方：
app/views/users/edit.html.erb
- <%= ff.date_field :birthday, :class => "form-control" %>
+ <%= ff.text_field :birthday, :class => "form-control" %>
# 略
+ <script>
+ $("#user_profile_attributes_birthday").datepicker({ format: "yyyy-mm-dd" });
+ </script>
注意格式要指定以配合 Rails，这里指定成"yyyy-mm-dd"年月日的顺序。
其中#user_profile_attributes_birthday这个 HTML ID 可以透过 Chrome 按右键透过 Inspect 观察得知：
这是成果：
如果需要支援多语言，可以指定语言：
$("#user_profile_attributes_birthday").datepicker({ format: "yyyy-mm-dd", language: "<%= I18n.locale %>" });
