我的rails应用程序都设置为与bootstrap很好地配合，我的表单设置了一个日历图标旁边的输入字段，点击后，让我选择一个日期。
我的宝石文件中有这些宝石：
gem 'momentjs-rails', '>= 2.9.0', :github => 'derekprior/momentjs-rails'
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
然后，我加入了一个引导主题，现在一切都搞砸了，我无法弄清楚如何在引导主题强加收集日期之前回到我的工作状态。
我目前有一张表格：
<%= pdf.input :start_date, :as => :date_picker, :label => "When do you want to get started?" %>
</div>
<div class="col-md-4">
<%= pdf.input :completion_date, :as => :date_picker, :label => "When do you expect to finish?" %>
</div>
在我的供应商资产中，我有以下的javascript文件：
/*! version : 4.7.15
=========================================================
bootstrap-datetimejs
https://github.com/Eonasdan/bootstrap-datetimepicker
Copyright (c) 2015 Jonathan Peterson
=========================================================
*/
/*
我无法复制该文件的内容，因为它太长并且超过了SO帖子的最大帖子长度。
在集成引导程序主题之前，我使用表单元素很好地处理日历图标按钮旁边的文本框，该按钮打开以显示日历。
现在，我有一个丑陋的日历，在下一个/下一个标题下面，下面是时间（小时分钟）功能以及现在＆＃39;现在＆＃39;并且＆＃39;完成＆＃39;纽扣。这太丑了。这不是我想要的，我无法弄清楚如何摆脱它。
当我检查元素时，我可以看到以下情况：div类根本不是我在表单中的行。我无法理解它是如何进入我的应用程序的，它在代码检查器中显示但不是应用程序的一部分：
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">May</span> <span class="ui-datepicker-year">2016</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th scope="col" class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th scope="col"><span title="Monday">Mo</span></th><th scope="col"><span title="Tuesday">Tu</span></th><th scope="col"><span title="Wednesday">We</span></th><th scope="col"><span title="Thursday">Th</span></th><th scope="col"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">1</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">2</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">3</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">4</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">5</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">6</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">7</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">8</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">9</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">10</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">11</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">12</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">13</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">14</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">15</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">16</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">17</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">18</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">19</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">20</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">21</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">22</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">23</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">24</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">25</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">26</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">27</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">28</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">29</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default" href="#">30</a></td><td class=" ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="4" data-year="2016"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">31</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td></tr></tbody></table><div class="ui-timepicker-div"><dl><dt class="ui_tpicker_time_label">Time</dt><dd class="ui_tpicker_time">00:00</dd><dt class="ui_tpicker_hour_label">Hour</dt><dd class="ui_tpicker_hour"><div class="ui_tpicker_hour_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div></dd><dt class="ui_tpicker_minute_label">Minute</dt><dd class="ui_tpicker_minute"><div class="ui_tpicker_minute_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div></dd><dt class="ui_tpicker_second_label" style="display:none;">Second</dt><dd class="ui_tpicker_second"><div class="ui_tpicker_second_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display:none;"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div></dd><dt class="ui_tpicker_millisec_label" style="display:none;">Millisecond</dt><dd class="ui_tpicker_millisec"><div class="ui_tpicker_millisec_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display:none;"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div></dd><dt class="ui_tpicker_timezone_label" style="display:none;">Time Zone</dt><dd class="ui_tpicker_timezone" style="display:none;"><select><option value="-1200">-1200</option><option value="-1100">-1100</option><option value="-1000">-1000</option><option value="-0930">-0930</option><option value="-0900">-0900</option><option value="-0800">-0800</option><option value="-0700">-0700</option><option value="-0600">-0600</option><option value="-0500">-0500</option><option value="-0430">-0430</option><option value="-0400">-0400</option><option value="-0330">-0330</option><option value="-0300">-0300</option><option value="-0200">-0200</option><option value="-0100">-0100</option><option value="+0000">+0000</option><option value="+0100">+0100</option><option value="+0200">+0200</option><option value="+0300">+0300</option><option value="+0330">+0330</option><option value="+0400">+0400</option><option value="+0430">+0430</option><option value="+0500">+0500</option><option value="+0530">+0530</option><option value="+0545">+0545</option><option value="+0600">+0600</option><option value="+0630">+0630</option><option value="+0700">+0700</option><option value="+0800">+0800</option><option value="+0845">+0845</option><option value="+0900">+0900</option><option value="+0930">+0930</option><option value="+1000">+1000</option><option value="+1030">+1030</option><option value="+1100">+1100</option><option value="+1130">+1130</option><option value="+1200">+1200</option><option value="+1245">+1245</option><option value="+1300">+1300</option><option value="+1400">+1400</option></select></dd></dl></div><div class="ui-datepicker-buttonpane ui-widget-content"><button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" data-handler="today" data-event="click">Now</button></div></div>
当我在我的应用代码中搜索＆＃34;日期选择器＆＃34;时，我找到了一个名为inputs的文件夹，其中包含date_picker_input.rb文件，其中包含：
class DatePickerInput < SimpleForm::Inputs::StringInput
def input(wrapper_options)
set_html_options
set_value_html_option
template.content_tag :div, class: 'input-group date datetimepicker' do
input = super(wrapper_options) # leave StringInput do the real rendering
input + input_button
end
end
def input_html_classes
super.push '' # 'form-control'
end
private
def input_button
template.content_tag :span, class: 'input-group-btn' do
template.content_tag :button, class: 'btn btn-default', type: 'button' do
template.content_tag :span, '', class: 'glyphicon glyphicon-calendar'
end
end
end
def set_html_options
input_html_options[:type] = 'text'
input_html_options[:data] ||= {}
input_html_options[:data].merge!(date_options: date_options)
end
def set_value_html_option
return unless value.present?
input_html_options[:value] ||= I18n.localize(value, format: display_pattern)
end
def value
object.send(attribute_name) if object.respond_to? attribute_name
end
def display_pattern
I18n.t('datepicker.dformat', default: '%d/%m/%Y')
end
def picker_pattern
I18n.t('datepicker.pformat', default: 'DD/MM/YYYY')
end
def date_view_header_format
I18n.t('dayViewHeaderFormat', default: 'MMMM YYYY')
end
def date_options_base
{
locale: I18n.locale.to_s,
format: picker_pattern,
dayViewHeaderFormat: date_view_header_format
}
end
def date_options
custom_options = input_html_options[:data][:date_options] || {}
date_options_base.merge!(custom_options)
end
end
我不确定这是否强加了样式或元素。我发现这个过程非常令人沮丧，我没有记录以帮助卸载bootstrap主题。我失去了很多时间，试图弄清楚如何摆脱这种情况，并且陷入困境。
有人可以帮忙吗？
更令人沮丧的是，日期不再作为数据库中的属性保存。
不知何故，这行代码被强加在我的应用程序中，但不会出现在我的代码中的任何地方：
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">June</span> <span class="ui-datepicker-year">2016</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr><th scope="col" class="ui-datepicker-week-end">
<span title="Sunday">Su</span></th><th scope="col"><span title="Monday">Mo</span></th><th scope="col"><span title="Tuesday">Tu</span></th><th scope="col"><span title="Wednesday">We</span></th><th scope="col"><span title="Thursday">Th</span></th><th scope="col"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">1</a></td><td class=" ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">2</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">3</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">4</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">6</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">7</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">8</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">9</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">10</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">11</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">13</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">14</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">15</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">16</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">17</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">18</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">20</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">21</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">22</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">23</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">24</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">25</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">28</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">29</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2016"><a class="ui-state-default" href="#">30</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
<div class="ui-timepicker-div">
<dl>
<dt class="ui_tpicker_time_label">Time</dt>
<dd class="ui_tpicker_time">00:00</dd>
<dt class="ui_tpicker_hour_label">Hour</dt>
<dd class="ui_tpicker_hour">
<div class="ui_tpicker_hour_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>
</dd>
<dt class="ui_tpicker_minute_label">Minute</dt>
<dd class="ui_tpicker_minute">
<div class="ui_tpicker_minute_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>
</dd>
<dt class="ui_tpicker_second_label" style="display:none;">Second</dt>
<dd class="ui_tpicker_second">
<div class="ui_tpicker_second_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display:none;">
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>
</dd>
<dt class="ui_tpicker_millisec_label" style="display:none;">Millisecond</dt>
<dd class="ui_tpicker_millisec">
<div class="ui_tpicker_millisec_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display:none;"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>
</dd>
<dt class="ui_tpicker_timezone_label" style="display:none;">Time Zone</dt>
<dd class="ui_tpicker_timezone" style="display:none;">
<select>
<option value="-1200">-1200</option>
<option value="-1100">-1100</option>
<option value="-1000">-1000</option>
<option value="-0930">-0930</option>
<option value="-0900">-0900</option>
<option value="-0800">-0800</option>
<option value="-0700">-0700</option>
<option value="-0600">-0600</option>
<option value="-0500">-0500</option>
<option value="-0430">-0430</option>
<option value="-0400">-0400</option>
<option value="-0330">-0330</option>
<option value="-0300">-0300</option>
<option value="-0200">-0200</option>
<option value="-0100">-0100</option>
<option value="+0000">+0000</option>
<option value="+0100">+0100</option>
<option value="+0200">+0200</option>
<option value="+0300">+0300</option>
<option value="+0330">+0330</option>
<option value="+0400">+0400</option>
<option value="+0430">+0430</option>
<option value="+0500">+0500</option>
<option value="+0530">+0530</option>
<option value="+0545">+0545</option>
<option value="+0600">+0600</option>
<option value="+0630">+0630</option>
<option value="+0700">+0700</option>
<option value="+0800">+0800</option>
<option value="+0845">+0845</option>
<option value="+0900">+0900</option>
<option value="+0930">+0930</option>
<option value="+1000">+1000</option>
<option value="+1030">+1030</option>
<option value="+1100">+1100</option>
<option value="+1130">+1130</option>
<option value="+1200">+1200</option>
<option value="+1245">+1245</option>
<option value="+1300">+1300</option>
<option value="+1400">+1400</option>
</select>
</dd>
</dl>
</div>
<div class="ui-datepicker-buttonpane ui-widget-content">
<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" data-handler="today" data-event="click">Now</button>
</div>
</div>
采取SAHIL＆＃39; S建议
我尝试从application.js文件中删除jQuery-ui。
当我这样做时，丑陋的日历会被移除，但我应该能够点击以显示日历的图标日历不起作用。控制台错误说：
jquery.surveyor.self-2c34bb6….js?body=1:43 Uncaught TypeError: jQuery(...).datepicker is not a function(anonymous function) @ jquery.surveyor.self-2c34bb6….js?body=1:43fire @ jquery.self-660adc5….js?body=1:3233self.fireWith @ jquery.self-660adc5….js?body=1:3363jQuery.extend.ready @ jquery.self-660adc5….js?body=1:3583completed @ jquery.self-660adc5….js?body=1:3618
从APPLICATION.JS中删除JQUERY UI
如果我从application.js文件中删除// = require jquery-ui，我会收到以下错误。当我这样做时，页面呈现时没有更全面的日历（所有时间选择器位），但是日历的图标在点击时无法显示日期日历。
未捕获TypeError：jQuery（...）。datepicker不是函数（匿名函数）@jquery.surveyor.self-2c34bb6 ... .js？body = 1：43fire @ jquery.self-660adc5 ... .js？body = 1：3233self.fireWith @ jquery.self-660adc5 ... .js？body = 1：3363jQuery.extend.ready @ jquery.self-660adc5 ... .js？body = 1：3583completed @ jquery.self-660adc5 ... .js？体= 1：3618
答案 0 :(得分：0)
事情以下列方式发生。 你添加了datetimepicker-rails gem并运行它的生成器。你现在有了一个DatePickerInput类，所以当你输入as：date_picker时，它将使用以下css样式 - 看here来源
template.content_tag :div, class: 'input-group date datetimepicker' do
input = super(wrapper_options) # leave StringInput do the real rendering
input + input_button
end
现在，查看here - 了解将要运行的.js代码：
vendor 'assets/javascripts/pickers.js' do <<-FILE
$(document).on('ready page:change', function() {
$('.datetimepicker').datetimepicker({
// put here your custom picker options, be applied for all pickers
});
因此，在以前使用datetimepicker类生成的div上调用 datetimepicker（） JavaScript函数。现在，虽然控件可能希望从bootstrap运行JavaScript：
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
它改为调用相同名称的jQuery方法 - 请参阅here
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
这就是所有这些u-* css样式的来源。
你应该不在同一个地方同时使用bootstrap和jQuery UI datepickers - 请参阅问题here
当你谈论使用bootstrap似乎和控制时，从你的代码中删除jQuery UI。