using jQuery-rails and datepicker, timepicker, datetimepicker 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 <a href="http://jqueryui.com/demos/datepicker">here</a> # 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/jqueryui.css" = javascript_include_tag "application" ## 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: ' @ ' });