RailsでjQuery-uiのDatePickerを日本語表示する-jquery-ui-rails(6..)

はじめに

jquery-ui-railsを利用してDatePickerを利用する際、jquery-ui-rails(4..)とjquery-ui-rails(6..)で多少設定のやり方が違っていたのでメモ

DatePikcerの使い方

Gemfile

Gemfileに以下のように追加しbundle install

gem 'jquery-rails'
gem 'jquery-ui-rails'

bundle list

* jquery-rails (4.3.1)
* jquery-ui-rails (6.0.1)

application.css (jquery-ui-rails 6..)

application.cssに以下のように設定

 *= require jquery-ui/datepicker
 *= require_tree .
 *= require_self

application.js(jquery-ui-rails 6..)

application.jsに以下のように設定

//= require jquery
//= require jquery-ui/widgets/datepicker
//= require jquery-ui/i18n/datepicker-ja
//= require jquery_ujs
//= require turbolinks
//= require_tree .

//= require jquery-ui/i18n/datepicker-jaを追加することで日本語表示になります。

date_picker.coffee

ready = ->
  dateFormat = 'yy-mm-dd';
  $('.date-picker').datepicker(
    dateFormat: dateFormat,
    minDate: 0
  );
$(document).ready(ready)
$(document).on('turbolinks:load', ready)

html

<input class="date-picker" type="text" name="hogehogedate-picker">

jquery-ui-rails(4..) - 参考までに

gem

bundle install

jquery-rails (4.1.0)
jquery-ui-rails (4.2.0)

application.css (jquery-ui-rails 4..)

 *= require jquery.ui.datepicker
 *= require_tree .
 *= require_self

application.js (jquery-ui-rails 4..)

//= require jquery
//= require jquery.ui.datepicker
//= require jquery.ui.datepicker-ja
//= require jquery_ujs
//= require turbolinks
//= require_tree .

//= require jquery.ui.datepicker-jaを追加することで日本語表示になります。

以上jquery-ui-railsを利用してDatePickerを利用する際のjquery-ui-rails(4..)とjquery-ui-rails(6..)の違いのメモでした。