繁体   English   中英

jquery 日期/时间选择器问题(时间选择器不是函数)

[英]jquery date/time picker issue (timepicker not a function)

使用这个https://github.com/jonthornton/jquery-timepicker

此处演示: http://jonthornton.github.com/jquery-timepicker/

在 Rails 3.2 应用程序上

尝试使用 datepair 示例并且似乎无法弄清楚为什么时间字段不起作用弹出第一个字段的日历,但没有别的。

查看代码:

  %p.datepair{'data-language' => "javascript"}
    = f.text_field :starttime, :class => 'date start'  
    %span.ui-timepicker-container
      = f.text_field :starttime, :class => 'time start ui-timepicker-input', :autocomplete => "off", :value => "12:15am"  
      %ul.ui-timepicker-list{ :tabindex => "-1", :style => "position: absolute; left: 567.667px; z-index: 2; top: 2246.87px; display: none;" }
        %li 12:00am
        %li 12:15am
        ...
        %li 12:30am
        %li 1:00am
    %span.ui.timepicker-container
      = f.text_field :starttime, :class => 'time start ui-timepicker-input', :autocomplete => "off"  
      %ul.ui-timepicker-list.ui-timepicker-with-duration{ :tabindex => "-1", :style => "position: absolute; left: 674.5px; z-index: 2; top: 2422.87px; display: none;"}
      = f.text_field :starttime, :class => 'date start hasDatePicker'  

在萤火虫控制台中,我得到:

$this.timepicker is not a function

$this.timepicker(opts);

我猜你的 Rails 安装没有加载 jquery.timepicker.js

datepair.js 使用 jquery.timepicker.js 和来自 jQuery UI 的日期选择器(为此在 application.js 中使用//= require jquery-ui )。

这是我的 Rails 应用程序中的内容:

vendor/assets/javascripts/jquery-timepicker/datepair.js
vendor/assets/javascripts/jquery-timepicker/jquery.timepicker.js
vendor/assets/stylesheets/jquery-timepicker/jquery.timepicker.css

然后在 your.js 文件之一中:

//= require jquery-ui-addresspicker/jquery.ui.addresspicker.js
//= require jquery-timepicker/jquery.timepicker.js
//= require jquery-timepicker/datepair.js

在您的 .css 文件之一中:

 *= require jquery-timepicker/jquery.timepicker.css

我创建了一个 gem 来打包这个 jQuery 插件: https://github.com/tkrotoff/jquery-timepicker-rails

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM