activeadmin 加入datepicker

active_admin_js.coffee
#= require jquery-ui/datepicker-zh-TW
admin/MODEL.rb
permit_params :name , :description , :available_on , :slug

datepicker_options = { 
    changeMonth: true,
  changeYear: true,
  dateFormat: "DD, MM d, yy",
  regional: [ "zh-TW" ]
}
form do |f|
    f.inputs "User Details"  do
        f.input :name
        f.input :description
        f.input :slug
        f.input :available_on, as: :datepicker ,datepicker_options:datepicker_options
    end

    f.actions
end

hack datepicker css

在把datepicker設定成中文,然後又要能選年份跟月份的狀態下,datepicker的css看起來會變得怪怪的


所以就要來hack 一下 css

active_admin.scss
.ui-datepicker .ui-datepicker-title {
  white-space: nowrap;

}

正常了~

詳細的datepicker用法可以參考jquery-ui-datepicker

comments powered by Disqus