您的位置：主页 > 技术文章 > JQuery > jQuery UI Datepicker 应用举例

jQuery UI Datepicker 应用举例

2010-06-13    文章来源：    浏览次数：343

jQuery UI Datepicker 样例

 

界面效果：

 


 

 

Html代码 复制代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <title>日期选择</title>  
  5.   
  6. <script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>  
  7. <script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>  
  8. <link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  
  9.   
  10. <!-- date picker 本地化 -->  
  11. <script type='text/javascript' src='../public/jquery-ui-1.7.2.custom/js/ui.datepicker-zh-CN.js'></script>  
  12. <link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/pack_datepicker.css" rel="stylesheet" />  
  13.   
  14.   
  15. <script type="text/javascript">  
  16. $(function(){   
  17.     $("#sponsorDate").datepicker({   
  18.         changeMonth: true, changeYear: true,   
  19.         showOn: 'button',    
  20.         buttonImage: 'images/calendar.gif',    
  21.         buttonImageOnly: true,   
  22.                 minDate: '-2y', maxDate: '+2y'   
  23.     });   
  24.     $('#sponsorDate').datepicker('option', {dateFormat: "yy/mm/dd" });     
  25.        
  26. });   
  27. </script>  
  28.   
  29. </head>  
  30.   
  31. <body>  
  32.  <input name="sponsorDate" type="text" id="sponsorDate" value="<% = SponsorDate %>" size="50" maxlength="50" >  
  33. </body>  
  34. </html>  

 

pack_datepicker.css 是一个修正样式。使用默认的样式，在使用国际化同时启用changeYear和changeMonth后，年份和月份两个select显示为两行，很不好看。

Css代码 复制代码
  1. .ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }    
  2. .ui-datepicker select.ui-datepicker-month-year {width: 100%;}    
  3. .ui-datepicker select.ui-datepicker-month,    
  4. .ui-datepicker select.ui-datepicker-year { width: 40%;}    
  5. .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }    
  6.   
  7. /* 控制字体大小     
  8. .ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:1.2em}   
  9. */  

 

ui.datepicker-zh-CN.js 汉化脚本：

Js代码 复制代码
  1. jQuery(function($){   
  2.     $.datepicker.regional['zh-CN'] = {   
  3.         closeText: '关闭',   
  4.         prevText: '&#x3c;上月',   
  5.         nextText: '下月&#x3e;',   
  6.         currentText: '今天',   
  7.         monthNames: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],   
  8.         monthNamesShort: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],   
  9.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],   
  10.         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],   
  11.         dayNamesMin: ['日','一','二','三','四','五','六'],   
  12.         dateFormat: 'yy/mm/dd', firstDay: 1,   
  13.         isRTL: false};   
  14.     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);   
  15. });  
  • 上一篇：使用mysql的replace函数替换指定字段的指定字符串
  • 下一篇：有关CI页面缓存问题的终极解决方案

    • 文章评论(查看全部)

    验证码: