Tweet

jQuery datepicker plugin is used to display inline calendar popup that eases user input experience while entering date/time fields. Calendar can be easily binded to any html DOM element. To Apply different styles download css from here # Gemfile gem "jquery-rails"
# console bundle install
# app/assets/javascripts/application.js.coffee //= require jquery //= require jquery_ujs //= require jquery-ui
# app/views/layouts/application.html.haml = stylesheet_link_tag "application" = stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" = javascript_include_tag "application"
Before using timepicker download jquery-ui-timepicker js
wget http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js app/assets/javascripts/ Add timepcker js to application.js.coffee
//= require jquery-ui-timepicker-addon
## inside views # app/views/users/_form.html.haml = form_for @user ||= User.new do |f| = f.text_field :birth_date, :id => 'birthDate' = f.text_field :birth_time, :id => 'birthTime' = f.text_field :exam_on, :id => 'examOn' :javascript $(document).ready(function() { $("#birthDate").datepicker(); $("#birthTime").timepicker(); $("#examOn").datetimepicker(); $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible')
# customizations $('#birth_date').datepicker({ dateFormat: 'dd-mm-yy' }); $('#birth_date').datepicker({ disabled: true }); $("#examOn").datetimepicker({ ampm: true }); $("#examOn").datetimepicker({ timeFormat: 'h:m', separator: ' @ ' });

Tweet

Create new rails project
rails new demo -d mysql Add active_scaffold gem to bundler
gem "active_scaffold_vho" Run bundle install command
bundle install Setup active scaffold to use jQuery
rails g active_scaffold_setup jquery create public/javascripts/rails_jquery.js create public/javascripts/jquery-ui-timepicker-addon.js create config/initializers/active_scaffold.rb insert app/views/layouts/application.html.erb insert config/locales/en.yml gsub app/views/layouts/application.html.erb Generate active scaffold for resource city & zone
rails g active_scaffold City name:string invoke active_record create db/migrate/20110408123206_create_cities.rb create app/models/city.rb invoke test_unit create test/unit/city_test.rb create test/fixtures/cities.yml route resources :cities do as_routes end invoke active_scaffold_controller create app/controllers/cities_controller.rb create app/helpers/cities_helper.rb invoke test_unit create test/functional/cities_controller_test.rb create app/views/cities rails g active_scaffold Zone name:string city:references invoke active_record create db/migrate/20110408123531_create_zones.rb create app/models/zone.rb invoke test_unit create test/unit/zone_test.rb create test/fixtures/zones.yml route resources :zones do as_routes end invoke active_scaffold_controller create app/controllers/zones_controller.rb create app/helpers/zones_helper.rb invoke test_unit create test/functional/zones_controller_test.rb create app/views/zones Add Associations
class City < ActiveRecord::Base end class Zone < ActiveRecord::Base belongs_to :city end class City < ActiveRecord::Base has_many :zones end Migrate database
rake db:create rake db:migrate == CreateCities: migrating =================================== -- create_table(:cities) -> 0.1411s == CreateCities: migrated (0.1413s) ========================== == CreateZones: migrating ==================================== -- create_table(:zones) -> 0.1507s == CreateZones: migrated (0.1510s) =========================== Start Server
rails s Visit Browser URL: http://localhost:3000/cities

Snap

Tweet

Placeholder Demo

Ghostpe Demo

jQuery placeholder plugin can be used to display default text inside input text fields. HTML5 introduced type search fields with placeholder attribute support.
<input class="query" id="home-search" placeholder="Enter search text here" type="search" />
It should display default text "Enter search text here" inside text-field and when user tries to type something it disappears.
In order to achieve text marquee like effect to default text value with jQery use following jQuery code. It will type text character by character from left to right.
Same effect can be achieved by creating gif image of typing and placing it as background-image to text field with certain drawbacks like changing default text on the fly.
Place below code inside javascript tag in your html file
jQuery Code $(document).ready(function(){ var search = "#home-search"; var chars = $(search).attr('placeholder').split(''); $.each(chars, function(i, v){ setTimeout(function() { $(search).val((chars.slice(0, i+1).join(''))); }, 100*i); }); });
Got easy ??