20170722程序学习ORID

今天做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 %>" });