最近 div 作为 rails 中 bootstrap 日期选择器的容器和咖啡脚本和 simple_form

Question

我正在尝试在我的 rails 应用程序中设置 bootstrap 日期选择器。

它工作正常，但 css 一切都搞砸了，除非我分配一个可以容纳弹出窗口的容器 div。

我想创建一个通用方法来检查最接近的 div 弹出窗口，而不是将其附加到正文。

这是我的代码

咖啡

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%>

普通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>

我想做这样的事情

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

如果 date_picker class 始终设置在 input 上，那么您可以这样做：

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

请注意，container 选项需要是一个元素选择器，因此我们在 .attr('class')

返回的字符串前加上一个 .

更新

因为您需要它足够通用以解释多个 .date_picker，您可以使用 jQuery 的 .each() 方法遍历它们，然后您可以使用this 和你一样 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');
}

最近 div 作为 rails 中 bootstrap 日期选择器的容器和咖啡脚本和 simple_form

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

javascript

datepicker

ruby-on-rails-3

twitter-bootstrap