Rails3 使用Jquery datepicker

环境: 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/

 


Rails3 使用Jquery datepicker

你可能感兴趣的:(jquery,Datepicker,日期控件)