带有 Bootstrap 的 Rails - 日期选择器答案

【问题标题】：Rails with Bootstrap - date picker带有 Bootstrap 的 Rails - 日期选择器
【发布时间】：2016-05-31 05:37:42
【问题描述】：

我已将我的 rails 应用程序全部设置为可以很好地与 bootstrap 配合使用，并且我在表单设置中设置了一个日历图标旁边的输入字段，点击该图标后，我可以选择一个日期。

我的 gem 文件中有这些 gem：

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 帖子的最大帖子长度。

在集成引导主题之前，我让表单元素与日历图标按钮旁边的文本框很好地配合使用，该按钮打开以显示日历。

现在，我有一个丑陋的日历，在上一个/下一个标题下方，下面有时间（小时分钟秒）功能以及“现在”和“完成”按钮。它很丑。这不是我想要的，我不知道如何摆脱它。

当我检查元素时，我可以看到以下内容，但是 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>&nbsp;<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">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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>

当我在我的应用代码中搜索“日期选择器”时，我发现了一个名为 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

我不确定这是否是在强加样式或元素。我发现这个过程非常令人沮丧，我没有做笔记来帮助卸载引导主题。我一天中的大部分时间都在试图弄清楚如何摆脱这种情况，并且一直在寻找寻找的地方。

谁能帮忙？

更令人沮丧的是，日期不再作为属性保存在数据库中。

不知何故，这行代码被强加在我的应用程序中，但没有出现在我的代码中的任何地方：

    <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>&nbsp;<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">&nbsp;</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</td>
     <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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>

接受萨希尔的建议

我尝试从 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，我会收到以下错误。当我这样做时，页面呈现时没有更完整的日历（所有时间选择器位），但日历的图标在单击时无法显示日期日历。

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?身体=1:3618

【问题讨论】：

希望您使用的是git。如果是，您是否在进行这些更改之前提交了代码？如果是，那么我们有一个简单的返回方法。另外，您能否说出您是如何以及在何处添加 bootstrap 主题。
这是 gem 中的代码。 gem 安装供应商资产 javascripts 文件。但它并没有按照包含主题之前的方式呈现。
你在用 git 进行代码管理吗？
打开 application.css 并查看是否存在任何 //= require bootstrap datepicker theme 或 //= require jquery-ui 行。如果是，只需将其注释掉并重新启动 Rails 服务器，它应该被删除。
gem 的本质是它是从 gem 的源加载的。删除对 gem 的引用并重新捆绑。

标签： javascript jquery css ruby-on-rails twitter-bootstrap

【解决方案1】：

事情以下列方式发生。您添加了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() JavaScript 函数在之前生成的带有 datetimepicker 类的 div 上。现在，虽然控件可能希望从 bootstrap 运行 JavaScript：

 <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>

它改为调用同名的 jQuery 方法 - 请参阅 here

   $(function() {
        $( "#datepicker" ).datepicker();
      });
      </script>

这都是 ui-* css 样式的来源。

您应该不在同一个地方同时使用引导程序和 jQuery UI 日期选择器 - 请参阅问题 here

当您谈到使用引导程序外观和控制时，请从您的代码中删除 jQuery UI。

【讨论】：

谢谢帕维尔。你的意思是我不应该在我的应用程序中使用 jQuery 吗？或者你的意思是我需要找到一种方法来限制它的使用，以便它不涉及引导日期选择器功能。是的 - 我明白你对 pickers.js 文件的意思。如果我彻底摆脱 jQuery，恐怕其他依赖它的东西都行不通了。
不要从你的项目中删除 jQuery。
嗯，不，不是 jQuery 本身，而是 jQuery UI，它创建了那些 ui-datepicker-* 类。不过，这很奇怪，因为 jQuery UI datepicker 似乎依赖于 datepicker 调用而不是 datetimepicker
@Mel，提供输出页面的来源，以识别页面中包含的所有 JavaScript 文件。另外，如前所述，在任何 JS 接触它之前找到输出 html 代码 - 使用 curl 或任何其他工具来下载请求内容
@PavelBulanov - 这周我将尝试学习如何使用 curl 命令。我尝试从 application.js 中删除 jQuery ui 并显示上面产生的错误。了解 curl 后我会更新此内容