Build Status

Datetime Picker for Rails Bootstrap Forms

bootstrap_form-datetimepicker is bootstrap_form add-on to embed bootstrap-datetimepicker simply.

Requirements

  • Ruby 2.1+
  • Rails 4.1+
  • Twitter Bootstrap 3.0+
  • bootstrap-datetimepicker
  • momentjs

Installation

Add this line to your application's Gemfile:

gem 'bootstrap_form-datetimepicker'

And then execute:

$ bundle

Or install it yourself as:

$ gem install bootstrap_form-datetimepicker

Usage

Call datetime_picker within bootstrap_form_for:

<%= bootstrap_form_for(@item) do |f| %>
  <%= f.datetime_picker :available_since %>
<% end %>

will produce HTML like:

<div class="form-group">
  <label class="control-label" for="item_available_since">Available Since</label>
  <div class="bootstrap_form-datetimepicker input-group date" data-date-format="YYYY-MM-DD HH:mm:ss ZZ">
    <input class="form-control" id="item_available_since" name="item[available_since]" type="text" value="1955-10-23 11:22:33" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar">
      </span>
    </span>
  </div>
</div>

Note that bootstrap_form-datetimepicker class is used for wrapping div element. So you should initialize widgets like:

$(function () {
    $('.bootstrap_form-datetimepicker').datetimepicker();
});

You can specify the element's class with :datetimepicker_class option like:

<%= bootstrap_form_for(@item) do |f| %>
  <%= f.datetime_picker :available_since, datetimepicker_class: "my-picker-class" %>
<% end %>

Customizing format

You can specify datetime's format with :format option like:

<%= bootstrap_form_for(@item) do |f| %>
  <%= f.datetime_picker :available_since, format: "%Y-%m-%d" %>
<% end %>

or format's name defined in Time::DATE_FORMATS like:

<%= bootstrap_form_for(@item) do |f| %>
  <%= f.datetime_picker :available_since, format: :db %>
<% end %>

Also you can these globally like:

BootstrapForm::Datetimepicker.format = "%Y-%m-%d %H:%M:%S"
BootstrapForm::Datetimepicker.datetimepicker_format = "YYYY-MM-SS HH:mm:ss"

bootstrap-datetimepicker formats datetime with momentjs, whose its formating syntax differs from ruby's that. So this gem converts between them automatically, but in some cases, it can't (using proc, %e, etc). At that time, you should specify bootstrap-datetimepicker's format with :datetimepicker_format option like:

<%= bootstrap_form_for(@item) do |f| %>
  <%= f.datetime_picker :available_since, format: "%e %b", datetimepicker_format: "dd MMM" %>
<% end %>

Contributing

  1. Fork it ( https://github.com/a2ikm/bootstrap_form-datetimepicker/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request