Fatal编程技术网
  • javascript/
  • Javascript 带引导的Rails-日期选择器

Javascript 带引导的Rails-日期选择器

javascript jquery css ruby-on-rails twitter-bootstrap

Javascript 带引导的Rails-日期选择器,javascript,jquery,css,ruby-on-rails,twitter-bootstrap,Javascript,Jquery,Css,Ruby On Rails,Twitter Bootstrap,我把我的rails应用程序都设置好了，可以很好地与bootstrap配合使用，我的表单设置中有一个日历图标旁边的输入字段，单击该图标时，我可以选择一个日期 我的gem文件中有这些gem： gem 'momentjs-rails', '>= 2.9.0', :github => 'derekprior/momentjs-rails' gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branc

我把我的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
然后，我加入了一个bootstrap主题，现在一切都乱七八糟，我不知道如何回到bootstrap主题采用收集日期的方式之前的工作

我目前有一张表格，上面有：

<%= 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>
我无法复制该文件的内容，因为它太长，并且超过了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>
从APPLICATION.JS中删除JQUERY UI

如果从application.js文件中删除//=require jquery ui，则会出现以下错误。当我这样做时，页面呈现时没有更完整的日历（带有所有时间选择器位），但日历图标在单击时无法显示日期日历

未捕获类型错误：jQuery（…）。日期选择器不是函数（匿名函数）@jquery.surveyor.self-2c34bb6…js？body=1:43fire@jquery.self-660adc5…js？body=1:3233self.fireith@jquery.self-660adc5…js？body=1:3363jQuery.extend.ready@jquery.self-660adc5…js？body=1:3583完成@jquery.self-660adc5…js？body=1:3618。 您添加了gem并运行其生成器。现在您有了一个DatePickerInput类，所以当您将其设置为：date\u picker时，它将使用以下css样式-查找源代码

template.content_tag :div, class: 'input-group date datetimepicker' do
      input = super(wrapper_options) # leave StringInput do the real rendering
      input + input_button
    end
现在，查找将要运行的.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
   });

vendor'assets/javascripts/pickers.js'do事情发生的方式如下。
您添加了gem并运行其生成器。现在您有了一个DatePickerInput类，所以当您将其设置为：date\u picker时，它将使用以下css样式-查找源代码


template.content_tag :div, class: 'input-group date datetimepicker' do
      input = super(wrapper_options) # leave StringInput do the real rendering
      input + input_button
    end


现在，查找将要运行的.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
   });



vendor'assets/javascripts/pickers.js'我希望您使用的是
git
。如果是，在进行这些更改之前是否提交了代码？如果是，那么我们有一个简单的方法回去。另外，你能告诉我你是如何以及在哪里添加引导主题的吗？它是gem中的代码。gem安装一个供应商资产javascripts文件。但它的呈现方式与包含主题之前不同。是否使用git进行代码管理？打开application.css，查看是否存在任何
/=require bootstrap datepicker theme
或
/=require jquery ui
行。如果是，只需将其注释掉并重新启动rails服务器，它就应该被删除。删除对gem的引用并重新处理。我希望您使用的是
git
。如果是，在进行这些更改之前是否提交了代码？如果是，那么我们有一个简单的方法回去。另外，你能告诉我你是如何以及在哪里添加引导主题的吗？它是gem中的代码。gem安装一个供应商资产javascripts文件。但它的呈现方式与包含主题之前不同。是否使用git进行代码管理？打开application.css，查看是否存在任何
/=require bootstrap datepicker theme
或
/=require jquery ui
行。如果是，只需将其注释掉并重新启动rails服务器，它就应该被删除。删除对gem的引用并重新处理。谢谢Pavel。你是说我不应该在我的应用程序中使用jQuery吗？或者你的意思是我需要找到一种方法来限制它的使用，这样它就不会涉及到引导日期选择器功能。是的-我明白你对pickers.js文件的意思。如果我完全摆脱了jQuery，恐怕其他依赖它的东西将不起作用。不要从项目中删除jQuery。嗯，不，不是jQuery本身，而是创建那些UI datepicker-*类的jQuery UI。不过，这很奇怪，因为jQueryUIDatePicker似乎依赖于datepicker调用而不是datetimepicker@Mel，提供输出页面的源代码，以标识页面中包含的所有JavaScript文件。此外，正如前面所建议的，在任何JS接触到输出html代码之前找到它-使用curl或任何其他工具下载请求content@PavelBulanov-本周我将尝试学习如何使用curl命令。我尝试从application.js中删除jQuery ui，并显示上面产生的错误。我将在了解Curll后更新此内容。你是说我不应该在我的应用程序中使用jQuery吗？或者你的意思是我需要找到一种方法来限制它的使用，这样它就不会涉及到引导日期选择器功能。是的-我明白你对pickers.js文件的意思。如果我完全摆脱了jQuery，恐怕其他依赖它的东西将不起作用。不要从项目中删除jQuery。嗯，不，不是jQuery本身，而是创建那些UI datepicker-*类的jQuery UI。不过，这很奇怪，因为jQueryUIDatePicker似乎依赖于datepicker调用而不是datetimepicker@Mel，提供输出页面的源代码，以标识页面中包含的所有JavaScript文件。此外，正如前面所建议的，在任何JS接触到输出html代码之前找到它-使用curl或任何其他工具下载请求content@PavelBulanov-本周我将尝试学习如何使用curl命令。我尝试从application.js中删除jQuery ui，并显示上面产生的错误。在我了解了curl之后，我会更新这个

template.content_tag :div, class: 'input-group date datetimepicker' do
      input = super(wrapper_options) # leave StringInput do the real rendering
      input + input_button
    end



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
   });



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



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