环境: ruby 1.9.3 rails 3.2.8
1.如何在rails中使用漂亮的日期控件
创建工程,简单的步骤,还是记录一下吧,以便初学者学习
rails new test_datepicker cd test_datepicker rails g scaffold arctile title:string content:string release_date:date rake db:migrate rails s
article有个发布时间release_date, 在这个输入域使用日期控件, 首先修改视图页面,使用text_filed方法
<div class="field"> <%= f.label :relese_date %><br /> <%= text_field :article, :relese_date%> </div>
生成html
<input name="article[relese_date]" id="article_relese_date" type="text" size="30" value="2012-12-16"/>
第二步:在头文件中引用jquery,修改application.html.erb文件
<head> <title>TestDatepicker</title> <%= stylesheet_link_tag "http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"%> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "http://code.jquery.com/jquery-1.8.3.js" %> <%= javascript_include_tag "http://code.jquery.com/ui/1.9.2/jquery-ui.js" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head>
还有一步,如果你的application.js文件中默认使用jquery,则需要将其去掉,以免和上面的冲突
//= require jquery
//= require jquery_ujs
最后一步,给指定元算加入datepicker,在javascript文件夹下新建一个datepicker.js的文件,并在application.js文件中引用
//= require date_picker
datepicker.js文件内容:
jQuery(function(){ $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigText: '<<', prevBigStatus: '显示上一年', nextText: '下月>', nextStatus: '显示下月', nextBigText: '>>', nextBigStatus: '显示下一年', currentText: '今天', currentStatus: '显示本月', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], monthStatus: '选择月份', yearStatus: '选择年份', weekHeader: '周', weekStatus: '年内周次', dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dayStatus: '设置 DD 为一周起始', dateStatus: '选择 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '请选择日期', isRTL: false }; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); $('#article_relese_date').datepicker({ showAnim:"blind", changeMonth:true, changeYear:true }); });
注意:最后几句中 $('#article_relese_date'),就是给html元素加上datepicker的方法
其他参数可参见:http://api.jqueryui.com/datepicker/