Ruby on Rails + Formtastic + jQuery UI datepicker

Question

Formtastic에서 jQuery UI datepicker를 설치하려고합니다.

1. jQuery를 UI 2.0.2
2. 는
3. application.js 조정 조정 (그것은 다른 요소와 함께 작동 confimed)
4. 가 Formtastic 설치 (이 다른 요소와 함께 작동 confimed)를 첨가 : I는 그래서 http://blog.brzezinka.eu/webmaster-tips/ruby/ruby-on-rails-formtastic-jquery-ui-datepicker 따라 튜토리얼 및 의견
5. 변경된보기 내가 'Formtastic 점점 계속

:: U 설명 Formtastic.rb로 nknownInputError '에 < % = f.input : dtstart, : as => : datepicker %>가 있습니다. 내가 봤 거든이 오류에 대한 검색하지만 방향을 찾는 단서를 찾을 수 없습니다. 여기 아무 생각 없니? 나는 레일에있다 3.0.3

Answer 1

:as => :datepicker을 사용하는 경우 사용자 지정 입력을 만들어야합니다.

문서에서 알 수 있듯이

라는 app/inputs에 새 파일을 만들 date_picker_input.rb

class DatePickerInput < Formtastic::Inputs::StringInput 
    def input_html_options 
    super.merge(:class => "datePicker") 
    end 
end 

당신이 JQuery와 UI의 부가 기능을 트리거한다 할 일은 당신의 application.js :

$('.datePicker').datepicker(); 

당신은 '돈 경우 맞춤 입력을 만드는 것을 원하지 않는다면 다음과 같이 직접 클래스를 추가 할 수 있습니다.

<%= f.input :date, :input_html => { :class => 'datePicker'} %> 

Answer 2

나는 이것이 오래 전일지도 모르겠지만, 차세대를 위해 이것은 레일즈 3에 대한 기사가 많이 빠져 있기 때문이다. 그는 원래의 기사가 플러그인 버전을 가리 키도록 업데이트했다. 파일 http://github.com/demersus/formtastic_datepicker_inputs

Answer 3

다시 원래 게시물에서 먼 대답. 그럼에도 불구하고 여기에서 Formtastic 3.1 및 Rails 4 (그렇지 않으면 작동 할 수 있지만 테스트되지 않음)로이 작업을 수행하는 방법을 찾았습니다. all I did was look at how ActiveAdmin implements theirs. Gemfile의 formtastic gem을 사용하여 자신의 as: :datepicker 기능을 Formtastic by following the pattern they describe in their documentation에 의해 사용 된 input 방법.

간단히 말해, 아래의 파일/디렉토리를 생성합니다 (디렉토리가 이미하지 않는 경우 존재)를 간단히이 추가

# <your app>/app/inputs/datepicker_input.rb 
class DatepickerInput < ::Formtastic::Inputs::StringInput 
    def input_html_options 
     super.tap do |options| 
     options[:class] = [options[:class], "datepicker"].compact.join(' ') 
     options[:data] ||= {} 
     options[:data].merge! datepicker_options 
     end 
    end 

    private 
    def datepicker_options 
    options = self.options.fetch(:datepicker_options, {}) 
    options = Hash[options.map{ |k, v| [k.to_s.camelcase(:lower), v] }] 
    { datepicker_options: options } 
    end 
end 

을