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