文章来自：Rails3 使用Jquery datepicker
环境： ruby 1.9.3 rails 3.2.13
1.如何在rails中使用漂亮的日期控件
rails g scaffold article title:string content:string release_date:date rake db:migrate
article有个发布时间release_date, 在这个输入域使用日期控件， 首先修改视图页面，使用text_filed方法
<div class="field"> <%= f.label :relese_date %><br /> <%= f.text_field :release_date %> </div>
第二步：在头文件中引用jquery，修改views/layouts/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>
还有一步，如果你的assets/javascripts/application.js文件中默认使用jquery，则需要将其去掉，以免和上面的冲突
//= require jquery //= require jquery_ujs
最后一步，给指定元算加入datepicker，在assets/javascripts文件夹下新建一个datepicker.js的文件，并在application.js文件中引用
//= require datepicker
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/