vendredi 18 mars 2016

Closest div as container for bootstrap datepicker in rails and coffee script and simple_form

I am trying to set up bootstrap datepicker in my rails application.

It is working fine but the css is all messed up unless i assign a container div that can hold the pop up.

I would like to make a generic method that checks the closest div for the popup instead of appending it to the body.

Here is my code

Coffee

jQuery ->
jQuery('input.date_picker').datepicker
    dateFormat: 'mm/dd/yyyy'
    todayHighlight: true
    container: jQuery(this).closest('div').attr(class)
    autoclose: true
    todayBtn: true

Erb

    <%= simple_form_for @qc_assay_parameter, :url => qc_assay_parameter_path(@qc_assay_parameter) do |f| %>
     <%= f.error_messages %>
     <%= f.input :reference_number, label: 'Reference #', error: 'Reference Number is mandatory' %>
     <%= f.input :qc_assay_product_name_with_revision, label: 'Analyte , Rev#', url: '/qc_revisions', as: :autocomplete, placeholder: 'Type in Analyte Name', :input_html => {:class =>"span2", :rows => 6, :type => :text}%>
     <%= f.input :assay_date, as: :date_picker, placeholder: 'mm/dd/yyyy' %>
    <%= f.button :submit %>
   <%end%>

Plain Html

 <form id="edit_qc_assay_parameter_176094" class="simple_form edit_qc_assay_parameter" novalidate="novalidate" method="post" action="/qc_assay_parameter.176094" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<div class="input string required qc_assay_parameter_reference_number">
<div class="input autocomplete optional qc_assay_parameter_qc_assay_product_name_with_revision">
<label class="autocomplete optional control-label" for="qc_assay_parameter_qc_assay_product_name_with_revision">Analyte , Rev#</label>
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
<input id="qc_assay_parameter_qc_assay_product_name_with_revision" class="autocomplete optional span2 ui-autocomplete-input" type="text" value="LAP revision 0" size="30" rows="6" placeholder="Type in Analyte Name" name="qc_assay_parameter[qc_assay_product_name_with_revision]" data-autocomplete="/qc_revisions" autocomplete="off">
</div>
<div class="input date_picker optional qc_assay_parameter_assay_date">
<label class="date_picker optional control-label" for="qc_assay_parameter_assay_date">Assay date</label>
<input id="qc_assay_parameter_assay_date" class="string date_picker optional datepicker" type="date_picker" value="Sun, 03 Apr 2016 00:00:00 -0500" size="30" placeholder="mm/dd/yyyy" name="qc_assay_parameter[assay_date]">
</div>
<input class="btn" type="submit" value="Update Qc assay parameter" name="commit">
</form>

I would like to do something like

jQuery ->
jQuery('input.date_picker').datepicker
    dateFormat: 'mm/dd/yyyy'
    todayHighlight: true
    container: jQuery(this).closest('div').attr(class)
    autoclose: true
    todayBtn: true

container: jQuery(this).closest('div')

Aucun commentaire:

Enregistrer un commentaire