2014年1月27日月曜日

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)

  • この記事をシェアする

  • このエントリーをはてなブックマークに追加
  • このブログの更新をチェックする

  • follow us in feedly