JQuery datepicker實現日期組件下拉選擇

時間 2019-11-06

標籤 jquery datepicker 實現日期組件下拉選擇欄目 JQuery 简体版

原文原文鏈接

在rails中實現日期下拉選擇，重定義中文顯示：在application.js中增長: jquery

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，及樣式表： ajax

<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%>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。