Ruby on Rails 项目时间选择器答案

【问题标题】：Ruby on Rails Project TimepickerRuby on Rails 项目时间选择器
【发布时间】：2015-07-03 09:02:09
【问题描述】：

我正在尝试使用http://trentrichardson.com/examples/timepicker/ timepicker。我有 ruby 1.9.3p484 和 rails 4.1.0 版本。我已将来自上述网站的 jquery-ui-timepicker-addon.css 包含在我的 app/assets/stylesheets/application.css.scss 中。我还将 jquery-ui-timepicker-addon.js 复制到 app/assets/javascripts 中。

在我的 Gem 文件中，我添加了

gem 'jquery-rails'
gem 'jquery-ui-rails'

在我添加的 app/assets/javascripts/application.js 文件中

//= require jquery-ui
//= require jquery-ui-timepicker-addon

$( function(){
      $("#tpicker").timepicker();
      });

在我的 app/assets/stylesheets/application.css.scss 我已经添加了

*= require jquery-ui

还有来自底部的 jquery-ui-timepicker-addon.css（位于 http://trentrichardson.com/examples/timepicker/）的 CSS。

问题是这样的。在我的 html.erb 中，我有以下内容

<%= f.text_field :time, id: "tpicker" %>

但是，在给定的 text_field 中单击或键入时，时间选择器不会显示。请帮忙！

【问题讨论】：

这是一个错字$("tpicker").timepicker(); 吗？应该是$("#tpicker").timepicker();。
我已经在问题中修复了它。这是一个错字，而不是在我实际的 .js 文件中。感谢您在此处指出。
在浏览器中，您是否看到您添加的文件的页面来源被包含在脚本标记中，如果包含，它们不会被包含两次？
@Deep 我不太明白。我该如何检查？ :p
@Deep 我确实在我的页面源代码中看到了 jquery-ui-timepicker.js

标签： jquery ruby-on-rails ruby jquery-ui-datepicker timepicker

【解决方案1】：

在我看来，应该是这样的：

$( function(){
      $('#tpicker').timepicker();
      $('#tpicker').on('click', function (){
           $('#tpicker').timepicker('setTime', new Date());
         });
      });

更多示例——阅读jquery.timepicker demos and documentations

【讨论】：

用于调试，将alert('click!) 放入on_click_function 中，您可以看到有click 或没有... 作为案例您可以使用change 或其他事件... 一些浏览器不喜欢没有a 元素的click event...
我把函数改成了这个，'$(function(){ $('#tpicker').timepicker(); $('#tpicker').on('click', function ( ){ $('#tpicker').timepicker('setTime', new Date()); alert("click"); }); });'这是我的字段。点击后，什么都没有显示

【解决方案2】：

这就是它的工作原理。我在标签内的页面文件中包含了所有 javascript。它现在正在工作，除了我必须刷新页面才能工作。它第一次不起作用。

【讨论】：