datepicker problem

gistfile1.txt

application.html.erb 

<div class="modal hide fade in" id="body" >
      <%= form_for(@weight) do |f| %>
          <div class="modal-header">
          <%= render 'shared/error_messages', object: f.object %>   
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Record Body Weight</h3>
    </div>
            <div class="modal-body" id="datepicker">
              <center>My Weight for <%= f.text_field :date, 'data-behavior' => 'datepicker', placeholder: Date.today %></center>
            </div>
            <div class="modal-body">
             <center>is  <%= f.text_field :content, placeholder: "Your weight today" %></center>
            </div>
            <div class="modal-footer" align="center">
              <a href="#" class="btn" data-dismiss="modal">Close</a>
              <%= f.submit "Record Weight", :class => "btn btn-primary" %>
            </div>
            <% end %>
    </div>

application.js

$(document).on("focus", "[data-behavior~='datepicker']", function(e){
    $(this).datepicker({"format": "dd/mm/yyyy", "weekStart": 1, "autoclose": true});
});

bootstrap-datepicker.js (I changed the "this.element.is('input')" to input, I tried textarea and textfield, it's a text field where I want this to show.)

	var Datepicker = function(element, options){
		this.element = $(element);
		this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy');
		this.picker = $(DPGlobal.template).appendTo('body').hide().on('mousedown.Datepicker',$.proxy(this.mousedown, this)).on('click.Datepicker',$.proxy(this.click, this));

		this.isInput = this.element.is('input') || this.element.is('input');
		this.component = this.element.is('.date') ? this.element.find('.add-on') : false;