ActiveAdminで日付をカレンダーから選択できるようにする

ActiveAdminで日付をカレンダーから選択できるようにするには、just-datetime-pickerを使用します。just-datetime-pickerはgemの1つで、簡単にカレンダーを表示させることができます。使い方は以下の通りです。

1.Gemfileに記入してbundle install

まずGemfileに記入します。アプリのトップに移動して以下のコマンドを入力します。

$ vim gemfile

Gemfileを開いたら以下の以下のコードを追記します。

gem "just-datetime-picker"

Gemfileへの記入が終わったらbundle installをします。

$ bundle install

以上でインストールが完了です。次に初期設定を行います。

2.CSSファイルに記入

ActiveAdminのCSSファイルであるactive_admin.css.scssに追記します。まずはactive_admin.css.scssを開きます。active_admin.css.scssはデフォルトの状態でしたらapp/assets/stylesheetsにあります。

$ vim app/assets/stylesheets/active_admin.css.scss

active_admin.css.scssに以下のコードを追記します。

@import "just_datetime_picker/base";

次にActiveAdminのJavascriptのファイルに追記します。

3.Javascriptファイルに記入

次にActiveAdminのJavascriptファイルであるactive_admin.jsに追記します。まずはactive_admin.jsを開きます。active_admin.jsはデフォルトの状態でしたらapp/assets/javascriptsにあります。

$ vim app/assets/javascripts/active_admin.js

active_admin.jsに以下のコードを追記します。

//= require just_datetime_picker/nested_form_workaround

以上で導入は完了です。importを適用させるために一度サーバーを再起動させてください。

4.ソースコードに記入

導入が完了したので実際に使ってみます。

ActiveAdmin.register User do

 form do |f|

  f.inputs do f.input :born_at, :as => :just_datetime_picker 

  end


  f.buttons

  end 

end

以上で以下のようなカレンダーが表示されると思います。

参照元：http://shakezoomer.com/?p=558#date）