Rails jQuery UI日期选择器

Question

我想在我的某个选择字段中添加日期选择器小部件。 我目前使用的是rails 3.2.13和ruby 1.9.3.p325。 我还包括了“jquery_datepicker”宝石，以及“jquery-rails”和“jquery-ui-rails”。 表单代码如下所示。

  <div class="field">
    <%= f.label :datum %><br />
    <%= f.text_field :datum , :id => "datepicker" %>
  </div>

包含的 JavaScript 代码如下：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require dataTables/jquery.dataTables
//= require select2
//= require_tree .


$ ->
  $("#practice_toolkeeper")
    .select2({
         allowClear: true,
         placeholder: 'Select an item'
    })
    .select2('val',$("#toolkeeper_value").val())    

$ ->
  $("#datepicker").datepicker()

生成HTML的函数

<div class="field">
  <label for="practice_datum">Datum</label><br />
  <input id="datepicker" name="practice[datum]" size="30" type="text" />
</div>

如果您选择输入字段，什么都不会发生。

- HappyHacking

---

抱歉，代码中的 $ -> 有什么用？还是只是为了这个问题而存在？ - SachinGutte

我对jquery和coffescript等内容非常陌生，不了解。 - HappyHacking

Answer 1

替换

$("datepicker").datepicker();

使用

$("#datepicker").datepicker();

选择器中缺少 #。因为 datepicker 是元素的 id，所以需要在选择器中使用 #。

更新

jQuery($)->
 $("#datepicker").datepicker();
 .....

我会尽力完成你的翻译需求。以下是需要翻译的内容：

这应该可以工作。

更新2

假设您在sample.coffee文件中有以下内容 -

jQuery ->
 $("#datepicker").datepicker();

您需要使用以下命令编译上述文件 -

coffee -c sample.coffee

这将生成一个包含以下内容的js文件 -

(function() {
  jQuery(function() {
    return $("#datepicker").datepicker();
  });

}).call(this);

如果您对coffee script不熟悉，请参阅http://coffeescript.org/#installation。

- SachinGutte

---

好的，我已经更改了，但是没有任何效果，请参见我上面的编辑。 - HappyHacking

无法工作，但现在在Firebug中我得到以下错误：TypeError: jQuery（...）.datepicker不是一个函数 [Break On This Error]返回jQuery（“#datepicker”）.datepicker（）; - HappyHacking

现在只有错误信息发生了变化... TypeError: $(...).datepicker 不是一个函数 [在此错误处中断]return $("#datepicker").datepicker(); - HappyHacking

你能发布一下由CoffeeScript生成的输出吗？你提到的代码不会在浏览器中运行，而是会生成JavaScript代码，需要将其放在页面中。 - SachinGutte

我不知道如何获取代码，但这是HTML包含的内容：<script media="all" src="/assets/practices.js?body=1" type="text/javascript"></script> - HappyHacking

Answer 2

你错过了用#选择具有id为datepicker的元素。应该是： #datepicker 。

$("#datepicker").datepicker()

- Eli