Datepickerのカレンダー表示がされない

Question

クリックするたびに行が増えていくプログラムを組んでいるのですが、その中のカレンダー表示が一度更新がかからないと表示できないです。

aaa.coffee

$('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

application.js

$(function(){
  $('.datepicker').datetimepicker({
    format : "YYYY/MM/DD",
    icons: {
      previous: "glyphicon glyphicon-chevron-left",
      next: "glyphicon glyphicon-chevron-right"
    }
  });
});

VIEW

<div class="form-group">
        <div class="col-xs-2" align="right"><%= f.label :start %></div>
        <div class="col-xs-4"><div class='input-group date datepicker'>
          <%= f.text_field :start, :class => "form-control" %>
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar "></span></span></div>
        </div>

Answer 1

Turbolinksによる影響だと思うので、application.jsを下記のようにしてみてください。

$(document).on("turbolinks:load", function () {
   :# ここにコード書く
});

Comments

[makox0105]

ほかとの兼ね合いでturbolinksはオフにしているのですが、大丈夫でしょうか？

[no1knows]

あぁ、オフにしていたら別の原因ですね。すいません。

[makox0105]

やってみました。ダメでした(T_T)