引导日期选择器导轨不起作用答案

【问题标题】：bootstrap date picker rails not working引导日期选择器导轨不起作用
【发布时间】：2014-05-06 07:22:09
【问题描述】：

read = ->
   $('#date_picker').datepicker

$(document).ready read
$(document).on "page:load", read

我在上面使用的代码就是我调用日期选择器的方式。我正在使用日期选择器导轨宝石。下面是表单代码

= simple_form_for :due_on,:url=> admin_requests_path,:method => "get",html: {id: "due_on_filter"}  do |f|
  = f.input :mydate,:disabled => 'disable', :input_html => { :data => {:behaviour => :datepicker },id: "date_picker"}

我无法让它工作。没有错误，但日期选择器不起作用。

这是我的 application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.ui.core
//= require jquery_nested_form
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require datatable_calls
//= require nprogress
//= require nprogress-turbolinks
//= require chosen-jquery
//= require chosen_calls
//= require filter_ajax_calls
//= require bootstrap-datepicker/core
//= require custom

表单的 HTML 原始输出为：

<form accept-charset="UTF-8" action="/admin/requests" class="simple_form due_on" id="due_on_filter" method="get" novalidate="novalidate">
<div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div>  
<div class="control-group string required due_on_mydate">
<label class="string required control-label" for="date_picker">
<abbr title="required">*</abbr> Mydate</label>
<div class="controls">
<input class="string required" data-behaviour="datepicker" id="date_picker" name="due_on[mydate]" type="text" />
</div>
</div>
</form>

【问题讨论】：

正在输出的 html 是什么，id date_picker 是在表单上设置的吗？我认为您没有在表单上正确设置您的 ID，但可能是错误的..值得检查
这是输出 html <form accept-charset="UTF-8" action="/admin/requests" class="simple_form due_on" id="due_on_filter" method="get" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div> <div class="control-group string required due_on_mydate"><label class="string required control-label" for="date_picker"><abbr title="required">*</abbr> Mydate</label><div class="controls"><input class="string required" data-behaviour="datepicker" id="date_picker" name="due_on[mydate]" type="text" /></div></div> </form>
有问题的错字？？ read = -> $('#date_picker').datepicker()
我敢打赌，它与 turbolinks 有关。尝试将 //= require jquery.turbolinks 添加到您的 application.js 以添加对页面事件的支持
这不起作用@lightswitch05

标签： ruby-on-rails twitter-bootstrap datepicker

【解决方案1】：

你确定这个 js/coffee 代码有效吗？

你可以试试吗：

setInterval(function() {
$(function () { 
var datepicker = $('#date_picker');                                                     
        if(datepicker.length) {
            datepicker.datepicker();
            alert("found the element!");
        } else {
            alert("could not find element");
        }    
    });  
}, 4000);

【讨论】：

返回找不到元素。
好吧，所以基本上我们知道该元素不是 dom 结构。如果您转到该页面并等待 30 秒或类似的时间会发生什么。表单是否被渲染，你是否收到“找到元素”的消息？
您能否将其附加到您的 application.js 文件“//= require_tree 。”也许有些东西不见了。

【解决方案2】：

在您的脚本中编辑为

$(function(){$("#datepicker").datepicker({
showbuttonPanel: true
});
});

并且您需要在 js 和 css 应用程序中都需要 bootstrap 和 jquery-ui-1.10.4.custom 文件。现在使用 datepicker id 在任何你想要的地方实现 datepicker。

【讨论】：