LoginSignup
6
7

More than 5 years have passed since last update.

日付をカレンダーから入力出来るようにする

Posted at
Gemfile
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'
app/assets/javascripts/application.js
//= require moment
//= require bootstrap-datetimepicker
// 日本語化する為ja.jsを読み込む
//= require moment/ja.js
app/assets/stylesheets/application.css
*= require bootstrap-datetimepicker
****.html.erb
<div class="form-group">
    <%= tp.label :start %><br>
    <div class="input-group date datetimepicker" style="width:250px;">
        <%= tp.text_field :start, class: 'form-control', placeholder: 'YYYY/MM/DD HH:mm' %>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>
app/assets/javascripts/****.js.coffee
$(".datetimepicker").datetimepicker({
    # 日本語化 
    locale: 'ja'
    # 年月日を時間を横に並べる
    sideBySide: true
    # テキストフィールドの表示形式
    format: 'YYYY/MM/DD HH:mm'
    # カレンダーのヘッダーの表示形式
    dayViewHeaderFormat: 'YYYY MMMM'
    # 5分ごとに変更できる
    stepping: 5
    })
6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7