如何将jQuery Datepicker连接到Ruby on Rails表单?

2020/12/31 15:51 · jquery ·  · 0评论

我正在尝试使用jQuery Datepicker在Ruby on Rails表单中设置日期字段,但是我不知道该怎么做。有人可以指出我正确的方向吗?

Ryan Bates对所有这些都有很好的解释:

http://railscasts.com/episodes/213-calendars(您可以免费观看的旧版本)
http://railscasts.com/episodes/213-calendars-revised(您需要订阅才能观看的修订版)

我建立了一个宝石来处理这个问题:

https://github.com/albertopq/jquery_datepicker

希望它可以帮助其他人。

到目前为止,由于其他原因,我建议使用jquery-ui-rails gem,这很简单,原因是您可以仅包含datepicker资产,而无需整个jquery ui库!

https://github.com/joliss/jquery-ui-rails

我使用albertopq提到的albertopq的jquery_datepicker,它可以使用常规形式,嵌套属性等。这对我来说非常容易。jquery_datepicker还可以正确地将选项传递给datepicker的必要javascript调用。

这是我的一种嵌套形式的示例:

<%= f.datepicker 'availability', :minDate => 0, :maxDate => "+8Y", :tab_index => autotab %>

将minDate和maxDate传递给datepicker,并将tab_index放入html文本字段。(autotab只是我的表单助手,对我来说,使选项卡+1 ...比硬编码更好。)

Rails 5.x的更新

步骤1.安装jquery-ui-rails gem

# gemfile
gem 'jquery-ui-rails'

# app/assets/javascripts/application.js
//= require jquery-ui/widgets/datepicker

# app/assets/stylesheets/application.css
*= require jquery-ui/datepicker

步骤2.假设您有一个名为Event的资源,其日期或日期时间字段称为:start,然后在表单中将:start字段设置为文本字段。

# app/views/events/_form.html.erb
<%= f.label :start, 'Start Date' %>
<%= f.text_field :start %>

步骤3.添加Javascript(此处为CoffeeScript语法)。Line1)如果启用了Turbolinks(当通过AJAX加载链接以单击链接时,Turbolinks加快了Rails页面的加载),则需要添加包装器,否则当您从内部链接导航到页面时,JavaScript函数将不会加载。

Line2)您正在定位表单中的元素ID。Rails通过组合模型名称和字段名称自动为表单输入分配一个ID。

Line3)您需要设置dateFormat,因为jQuery-UI和Rails使用不同的默认日期格式。

# app/assets/javascripts/event.coffee
$(document).on 'turbolinks:load', ->
  $('#event_start').datepicker
    dateFormat: 'yy-mm-dd'

对于Rails 4,除了JavaScript(或Cof​​feeScript)文件的第一行外,其他所有内容都相同。在Rails 4中启用Turbolinks时,用于加载JavaScript的包装器是:

$(document).on "page:change", ->

如果使用Rails 3.0+,则除了包含jQuery和jQuery UI外,您不需要做任何其他事情,因为jQuery是默认的JavaScript框架。

如果使用3.0之前的Rails或Prototype(或其他方式),则需要在noConflict模式下使用jQuery 确保在加载Prototype(您的其他框架)之后使用类似于以下内容的方式包含jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    // here the $ function is jQuery's because it's an argument
    // to the ready handler
    $('#dateField').datepicker();
  });
  // here the $ function is Prototype's
</script>

可能有点晚了,但我使用了一个简单的gem:

宝石文件:
gem 'jquery-ui-rails'

Application.js:
//= require jquery-ui

Application.css
*= require jquery-ui

接着:
Bundle install

来源:https :
//github.com/joliss/jquery-ui-rails

本文地址:http://jquery.askforanswer.com/ruhejiangjquery-datepickerlianjiedaoruby-on-railsbiaodan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!