Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@akishin

Rails 4.1 で bootstrap3-datetimepicker-rails を使う

Bootstrap 3 系に対応した日付入力の js ライブラリを Rails に導入する bootstrap3-datetimepicker-rails を試してみた。

TrevorS/bootstrap3-datetimepicker-rails
https://github.com/TrevorS/bootstrap3-datetimepicker-rails

環境

% bundle exec rake about
About your application's environment
Ruby version              2.1.3-p242 (x86_64-linux)
RubyGems version          2.2.2
Rack version              1.5
Rails version             4.1.6
JavaScript Runtime        Node.js (V8)
Active Record version     4.1.6
Action Pack version       4.1.6
Action View version       4.1.6
Action Mailer version     4.1.6
Active Support version    4.1.6

使ってみる

Gemfile に以下を追記して bundle install

Gemfile
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'

application.js.coffee に以下追記。

application.js.coffee
#= require moment
#= require bootstrap-datetimepicker

application.css.scss に以下追記。

application.css.scss
@import 'bootstrap-datetimepicker';

view で日付入力を使いたい text field に以下のように設定を行う。

  • data-date-format 属性で入力時の日付時刻のフォーマットを指定
  • bootstrap3-datetimepicker を有効にするため class に datetimepicker を指定
app/views/posts/_form.html.erb
<div class="controls">
  <%= f.text_field :published_at, data: { :date_format => 'YYYY/MM/DD hh:mm' }, :class => 'form-control datetimepicker', placeholder: 'YYYY/MM/DD hh:mm:ss' %>
</div>

class datetimepicker な要素に対して datetimepicker を有効にする。

app/assets/javascripts/posts.js.coffee
$ ->
  $(".datetimepicker").datetimepicker()

これで text field をクリックすると以下のように日付選択用のポップアップが表示されるようになる。

WS000076.jpg

参考

jQuery - RailsにDateTimePickerを導入する - Qiita
http://qiita.com/kidachi_/items/9f76a27890d96b9f5838

コピペで動く bootstrap-datetimepicker - Qiita
http://qiita.com/tkosuga@github/items/3fcac7d176ad8cf5af1e

datetime pickerの導入 - JunxBoxWiki
http://www.wicurio.com/junkbox/index.php?datetime%20picker%E3%81%AE%E5%B0%8E%E5%85%A5

Bootstrap datetimepicker
http://eonasdan.github.io/bootstrap-datetimepicker/

[Rails]日付と時間の入力フォームにDateTimePickerを使う(bootstrap3-datetimepicker-rails) | hello-world.jp.net
http://blog.hello-world.jp.net/javascript/1762/

42
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
42
Help us understand the problem. What is going on with this article?