datetime_picker_input

DatetimePickerInput

DatetimePickerInput allows you to easily add a JavaScript datetime picker to your Ruby on Rails, Bootstrap-enabled Simple Form input.

Prerequisites

Rails 3.1 and 4+ compatible, and your app should already have Bootstrap and Simple Form installed.

Otherwise, set up Bootstrap and Simple Form now.

Installation

Add this to your application's Gemfile then run bundle install:

gem 'datetime_picker_input'

In the JavaScript manifest file application.js, add:

//= require datetime_picker_input

In the CSS manifest file application.scss, add:

@import 'datetime_picker_input';

or application.css:

*= require datetime_picker_input

Usage

Demo app is available at http://datetime-picker-input.herokuapp.com.

Simple Usage

= simple_form_for Event.new do |f|
  f.input :when, as: :date_time_picker

By default (without config), when you select a value from the DateTime picker, the format of the value defaults to YYYY-MM-DD HH:mm:ss Z, i.e. 2015-10-25 14:33:02 +0800.

This ensures that, out of the box, this value (with Time Zone) would be passed on to the Rails backend and be saved as a DateTime value with the correct Time Zone.

Beneath the hood, Moment.js is used to parse and format value on the DateTime picker. For other valid formats, please refer to their Docs.

Warning!

However, if you do change the format (like in the Customized Options example), then you will need to implement your attribute setter and getter in Rails backend to save and display the value correctly in your desired Time Zone.

One way to do this is to implement an around_filter on your controllers like so:

class AppointmentsController < ApplicationController
  around_action :use_current_timezone

  # .. your controller code

  def use_current_timezone(&block)
    Time.use_zone(current_user.timezone, &block)
  end
end

This uses your user's Time Zone, so that the DateTime gets stored and will be displayed as expected (from the user's perspective).

We are also assuming that, in this example, the current_user has set a custom Time Zone, otherwise, you should just use the gem's default.

Times are hard..

Customized Options

= f.input :when, as: :date_time_picker, input_html:
  { data:
    {
      date_format: "YYYY-MM-DD hh:mm A",
      date_day_view_header_format: 'MMM YYYY',
      date_side_by_side: true,
      date_min_date: Time.current.strftime('%Y-%m-%d')
    }
  }

Bootstrap 3 Datepicker is able to initialize a datetime picker through the use of data attributes on the input field.

To do that, modify any of the options specified in Bootstrap 3 Datepicker's Doc by adding a prefix of date and underscoring the resulting option name.

For example:

• dayViewHeaderFormat to date_day_view_header_format
• minDate to date_min_date

Date Picker Only

= f.input :when, as: :date_time_picker, input_html: \
  { data: \
    { \
      date_format: "YYYY-MM-DD", \
    } \
  }

Customization

To customize the input field, you can copy datetime_picker_input.rb from the gem to your app by using the generator included in datetime_picker_input.

Simple do:

$ rails g datetime_picker_input:install

This will generate datetime_picker_input.rb under app/inputs directory which you can modify.

Dependencies

This gem is heavily dependent on and only possible because of the great work done in these gems:

• https://github.com/TrevorS/bootstrap3-datetimepicker-rails
• https://github.com/derekprior/momentjs-rails

Versioning

Since this gem is ultimately dependent on https://github.com/Eonasdan/bootstrap-datetimepicker, this gem shall have the same version as the JavaScript plugin - current release version is 4.0.0.

Any bug fix release of this gem will have a 4th decimal added, e.g. 4.0.0.1, 4.0.0.2.

Contributing

Please see the CONTRIBUTING.md file.

Credits

A huge THANK YOU to all our contributors! :heart:

License

Please see the LICENSE.md file.

Maintained by Jolly Good Code

We specialise in rapid development of high quality MVPs. Hire us to turn your product idea into reality.