扩展activeadmin的datepicker功能，以及中文布局错误的解决方法

activeadmin里的jquery datepicker方便好用，不过可以定义的东西就少了一点，譬如说我需要设定年份的范围，并让年份和月份可以用下拉框选择等等，而且当我把显示语言改成中文后，下拉框的布局整个乱了，以下是解决办法。

首先在admin/model.rb那里

form do |f|                         
    f.inputs "用户信息" do       
      f.input :name                 
      f.input :birthday, :as => :datepicker, :input_html => { :id => "active_user_birthday"}
    end                               
    f.actions
    f.form_buffers.last << javascript_tag("$(document).ready(function(){
  $('#active_user_birthday').prop('readOnly', true).datepicker({changeYear: true, changeMonth: true, yearRange : '-65:-18', showMonthAfterYear: true});
});")                  
  end 

最后加的js代码会设置datepicker的一些属性:

prop('readOnly', true)  设置此框不能手工输入，要求必须从datepicker选择

changeYear, changerMonth, 设为true即可下拉选择年份和月份

yearRange，年份的选择范围，这里是65年前至18年前

showMonthAfterYear 选择界面年份在前，月份在后

更多的选项可以参看 jquery ui的datepicker api

然后在active_admin.js里加上中文化的代码（最好是引用jquery的i18n资源，但由于我是内网应用，只能这样了）

jQuery(function($){
  $.datepicker.regional['zh-CN'] = {
    closeText: '关闭',
    prevText: '<上月',
    nextText: '下月>',
    currentText: '今天',
    monthNames: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
    dayNamesMin: ['日','一','二','三','四','五','六'],
    weekHeader: '周',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

ok，这样嘛功能就实现了，但是会有个问题，加了年月选择后布局乱的不忍入目（主要是空间不够月份被挤到下面去了），所以还需要小小的hack。

首先是在active_admin.css.scss加入以下内容：

body.active_admin{
  .ui-datepicker {
    width: 208px;
    padding:.2em .2em 0;
  }
}
body.active_admin{
  .ui-datepicker {
    .ui-datepicker-calendar{
      font-size: 21px;
    }
  }
}

最后是找到datepicker-header-bg.png文件，development环境的话在active_admin gem所在目录下，如果编译过assets的话就在public\assets\active_admin\datepicker下，用locate很容易就找出来了，然后用图像处理软件（mac下的预览就可以）将其拉伸至203 x 36。

That's all.