simple_form 中使用jquery datepicker

环境：

windows 7 professional

rails 3.2.2

ruby 1.9.3p125

simple_form(2.0.4)

bootstrap-sass 2.1.0

目标：

在simple_form中对date类型的filed可以使用以下tag

=t.input :date_field, :as=>:datepicker

具体操作：

1. 建立 /app/inputs/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base
  def input
    @builder.text_field(attribute_name, input_html_options) + \
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"}) 
  end
end

 2.建立/app/assets/date.js.coffee

$ ->
  $("input.datepicker").each (i) ->
    $(this).datepicker
      altFormat: "yy-mm-dd"
      dateFormat: "yy-mm-dd"
      altField: $(this).next()

  $.datepicker.regional['zh-CN'] = 
    clearText: '清除'
    clearStatus: '清除已选日期'
    closeText: '关闭'
    closeStatus: '不改变当前选择'
    prevText: '<上月'
    prevStatus: '显示上月'
    prevBigText: '<<'
    prevBigStatus: '显示上一年'
    nextText: '下月>'
    nextStatus: '显示下月'
    nextBigText: '>>'
    nextBigStatus: '显示下一年'
    currentText: '今天'
    currentStatus: '显示本月'
    monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月']
    monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二']
    monthStatus: '选择月份'
    yearStatus: '选择年份'
    weekHeader: '周'
    weekStatus: '年内周次'
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六']
    dayNamesMin: ['日','一','二','三','四','五','六']
    dayStatus: '设置 DD 为一周起始'
    dateStatus: '选择 m月 d日, DD'
    dateFormat: 'yy-mm-dd'
    firstDay: 1
    initStatus: '请选择日期'
    isRTL: false

  $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 

 3. 修改Gemfile文件

gem 'jquery-ui-rails'

 4.修改/app/assets/javascripts/application.js

//= require jquery.ui.all

 5.为了用上bootstrap的theme

git clone https://github.com/addyosmani/jquery-ui-bootstrap

将相关文件copy至/app/assets下的images, stylesheets文件夹下，

我使用的为jquery-ui-1.8.6.custom.css

 

6. 修改view后， 重新启动应用，一切OK