您的位置：首页 > Web前端 > JQuery

JQuery datepicker实现日期组件下拉选择

2013-11-26 00:00 363 查看

参考文献：datepicker官方文档实例

博客---rails3中使用datepicker

JQuery各种日期组件小介绍

在rails中实现日期下拉选择，重定义中文显示：在application.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({ //#article_relese_date datepicker的id, 对此id命名的datepicker,作如下设置
changeMonth:true, //显示月份下拉菜单
changeYear:true   //显示年份下拉菜单
});
});

设置javascript，及样式表：

<head>
<title>This is a test!</title>
<link rel="icon" href="/assets/favicon.png"/>
<%= stylesheet_link_tag "application", "common_style", "easyui", :media => "all" %>    #在application.js中调用所有需要的js文件
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= yield :header %>
</head>

然后，调用即可，片段如下：

<tr class="...">
<td>项目预计结束时间</td>
<td class="..."><%= f.datepicker :time, :size => 10 %></td>
</tr>

#使用datepicker默认格式
<% content_for(:header) do %>
<%= stylesheet_link_tag "jquery-ui" %>
<%end%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： datepicker 下拉菜单日期控件 rails3

相关文章推荐

新的分享

章节导航