date_picker

Rails DatePicker-Integration

• Supports bootstrap-datetimepicker and jquery_ui-datepicker
• Seamless i18n-Integration
• FormBuilder- and SimpleForm-Helpers for date, datetime and time-attributes
• HTML5-Fallback on Mobile

Install

Add the following to your Gemfile:

gem 'date_picker'

The module does not bundle any third-party assets. Recommended way to download required client-side-dependencies is by using bower.

Integrate bower into your rails-app by running bower init from command-line:

bower init

Create a .bowerrc-file to point bower's installation directory to vendor/assets/components:

{
  "directory": "vendor/assets/components"
}

Add bower components to asset paths:

# config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

Bootstrap DateTimePicker

Bootstrap is supported by the integration of eonasdan-bootstrap-datetimepicker >= 4.17.37

Run the config-generator using :bootstrap

rails g date_picker:config :bootstrap

Install dependencies via bower

bower install bootstrap --save
bower install eonasdan-bootstrap-datetimepicker --save

Require javascript dependencies:

// app/assets/javascripts/application.js
//= require jquery/dist/jquery.min
//= require moment/min/moment.min
//= require moment/min/locales.min
//= require eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min

Require css dependencies:

/* app/assets/stylesheets/application.css
 *= require bootstrap/dist/css/bootstrap.min
 *= require eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min
 */

jQueryUI DatePicker

Also supported is jquery-ui's datepicker.

Run the config-generator using :jquery_ui

rails g date_picker:config :jquery_ui

Install dependencies via bower

bower install jquery-ui --save

Require javascript dependencies:

// app/assets/javascripts/application.js
//= require jquery/dist/jquery.min
//= require jquery-ui/jquery-ui.min

Require css dependencies:

/* app/assets/stylesheets/application.css
 *= require jquery-ui/themes/smoothness/jquery-ui.min
 *= require jquery-ui/themes/smoothness/theme
 */

Form helpers

The date_picker-Module provides tag helpers, form-builder helpers and simple_form-helpers for attributes of type :date, :datetime and :time.

Please note that jquery-ui can only handle dates, while eonasdan-bootstrap-datetimepicker also supports attributes of type :datetime and :time. Form helpers will fall back to the corresponding standard-rails date_select-helpers.

FormTagHelper

Use the form-tag-helper for non-model purposes:

date_picker_tag(name, value, options = {})
datetime_picker_tag(name, value, options = {})
time_picker_tag(name, value, options = {})

FormBuilder

Scaffold an example model and migrate database:

rails g scaffold Event date:date datetime:datetime time:time
rake db:migrate

_{If you're using Bootstrap, make sure to exclude generated scaffold.css because it may affect datepicker-styles undesirably. You may also want to add form-group to the field element's class}

Add date_picker-helpers to form-view:

<%# app/views/events/_form.html.erb %>
<%= form_for(@event) do |f| %>
  <div class="field">
    <%= f.label :date %><br>
    <%= f.date_picker :date %>
  </div>
  <div class="field">
    <%= f.label :datetime %><br>
    <%= f.datetime_picker :datetime %>
  </div>
  <div class="field">
    <%= f.label :time %><br>
    <%= f.time_picker :time %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

SimpleForm

Make sure, you added simple_form to your bundle and have run the install-generator, i.e. rails g simple_form:install --bootstrap.

Run date_picker's simple_form-generator in order to create the date_picker-component:

rails g date_picker:simple_form

This will create a custom-input date_picker. You may choose a different name by adding it to the command, e.g. datetime will override simple_form's default datetime-component.

rails g date_picker:simple_form date_time

Adjust the form to use simple_form-builder:

<%= simple_form_for(@event) do |f| %>
  <%# ... %>
  <div class="field form-group">
    <%= f.input :date %>
  </div>
  <div class="field form-group">
    <%= f.input :datetime %>
  </div>
  <div class="field form-group">
    <%= f.input :time %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Options

Name	Description
type	The data-type of the input, e.g. :date
format	Provide a strftime-pattern as string or a i18n-identifier as a symbol
time_zone	Specifies whether to include timezone-offset in format

All other options are passed as html-options to text_field-element. All data-attributes are passed to the javascript date_picker-implementation.

Internationalization

Install rails-i18n-gem to get a basic support for many languages.

# Gemfile
gem 'rails-i18n', '~> 4.0.0' # For 4.0.x

By default, the plugin looks for strftime-patterns in the following locations:

# config/locales/en.yml
en:
  date:
    formats:
      default: "%Y-%m-%d"
  time:
    formats:
      default: "%a, %d %b %Y %H:%M:%S %z"
      only_time: "%H:%M:%S %z"

You may want to change the i18n-identifier names by editing the configuration:

# config/initializers/date_picker.rb
DatePicker.configure do |config|
  config.formats = {
    date: :default,
    datetime: :default,
    time: :only_time
  }
end

bower install eonasdan-bootstrap-datetimepicker#development --save

Mobile

On mobile devices the plugin falls back to date_field-helpers using html5-input-types.

Changelog

See the Changelog for recent enhancements, bugfixes and deprecations.