Active UI Datepicker for Rails

Question

I am relative new to Rails. I am using Rails 3, simple form with UI Datepicker, a wrapper for jquery datetime selector. In the readme at https://github.com/kristianmandrup/ui_datepicker-rails3, there are lines

Activate it like this:

UiDatePickerRails3.activate :simple_form

This can be done fx from inside an initializer. You can pass either :simple_form, :formtastic or :active_admin to the #activate method.

I don't know where to put or run UiDatePickerRails3.activate :simple_form to activate it.

My view code

%h2
 Create new task
= simple_form_for @task do |f|
 = f.input :name, :wrapper_html => { :id => 'name' }
 = f.input :description, :wrapper_html => { :id => 'description' }
 = f.input :price, :wrapper_html => { :id => 'price' }
 = f.association :task_type
 = f.input :content, :as => :ckeditor, :label => "Nội dung task", :input_html => {:toolbar => 'Full' }
 = f.input :expired_at, :wrapper_html => {:id => 'expired_at', :class => 'ui-date-picker'}
 -#= f.input :expired_at, :as => :date_picker
 = f.button :submit

Here is my application.js file

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a  relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require ckeditor/init

Answer 1

The initializer should be in your config/initializers directory.
This .rb file is created when you run the install generator (rails generate jquery:install --ui)

Update: Alright, the reason you got that message is because your rails version is 3.1 which uses asset pipeline to compress, concatenate your javascript and css.
For rails 3.1 asset pipelining is enabled by default.

So you got two options:

Option 1: Disable asset pipelining
Go to config/environments/development.rb (do the same for production.rb as and when required) and set config.assets.digest to false.

Option 2: Follow the workaround as mentioned in the documentation:
(excerpts from the repository's readme page)

In Rails 3.1 when using the asset pipeline, this generator is deprecated, so you’ll need to add a line to your app/assets/javascripts/application.js file:
//= require jquery-ui

More Updates Before you jump into fancier ajax stuff, you got to understand the basics of Ajax and how to implement it with rails. Check out this railscasts episode. It's a good tutorial to start with.

As for your issue, you missed quite a few things: To get jquery working you need the appropriate JQuery CSS and Javascript files, which can be downloaded from here: jquery-ui.

Next, you need to inform your application what action to take when it encounters this:
:class => 'ui-date-picker'

However, to understand this concept, you need to know how Ajax and jquery work.

For now, just create a new .js, name it datepicker.js and add the following
$(document).ready(function(){
$('input.ui-date-picker').datepicker();
$('input.ui-datetime-picker').datetimepicker();
});

These steps are mentioned in the configuration section here.

I would suggest you to install rails 3.0.9, it's relatively simpler. Also, it's better to use built-in form builder when you are a beginner, get used to it before starting with simple_form or formtastic.