最接近的div作为Rails和Coffee脚本以及simple_form中的引导日期选择器的容器

Question

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')

Answer 1

If the date_picker class is always set on the input then you can do this:

var nearestDivClassName = '.' + $('.date_picker').closest('div').attr('class')

jQuery('input.date_picker').datepicker
    dateFormat: 'mm/dd/yyyy'
    todayHighlight: true
    container: nearestDivClassName
    autoclose: true
    todayBtn: true

Note that the container option needs to be an element selector so we prepend a . to the string returned by .attr('class')

Update

As you need it to be generic enough to account for more than one .date_picker , you can use jQuery's .each() method to iterate through them and then you can use this as you expect/need:

$('input.date_picker').each(function(){
    $(this).datepicker({
        dateFormat: 'mm/dd/yyyy',
        todayHighlight: true,    
        autoclose: true,
        todayBtn: true,
        container: closestDivClassName($(this))
    });    
});

function closestDivClassName($el){          
      return '.' + $el.closest('div').attr('class');
}