JQuery日期选择器插件之date-input


官方网站：http://jonathanleighton.com/projects/date-input/

下载地址：

http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js

http://github.com/jonleighton/date_input/raw/master/date_input.css

中文支持：

[javascript] view plaincopy
  1. jQuery.extend(DateInput.DEFAULT_OPTS, {  month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],  short_day_names: ["一", "二", "三", "四", "五", "六", "日"]});  

说明：默认是日期格式很不好，可以根据需求修改。

全部代码如下：

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>日历</title>  
  6. <script type="text/javascript" src="jquery-1.3.2.js"></script>   
  7. <script type="text/javascript" src="jquery.date_input.js"></script>   
  8. <link rel="stylesheet" href="date_input.css" type="text/css">   
  9. <script>  
  10. jQuery.extend(DateInput.DEFAULT_OPTS, {   
  11. month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],   
  12. short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],   
  13. short_day_names: ["一", "二", "三", "四", "五", "六", "日"],  
  14.  dateToString: function(date) {  
  15.     var month = (date.getMonth() + 1).toString();  
  16.     var dom = date.getDate().toString();  
  17.     if (month.length == 1) month = "0" + month;  
  18.     if (dom.length == 1) dom = "0" + dom;  
  19.     return date.getFullYear() + "-" + month + "-" + dom;  
  20.   }  
  21.   
  22. });   
  23.   
  24. $(function() {   
  25. $(".biuuu1").date_input();   
  26. $(".biuuu2").date_input();   
  27. });   
  28. </script>  
  29. </head>  
  30.   
  31. <body>  
  32. <input type="text" class="biuuu1" name="date"/>   
  33. <input type="text" class="biuuu2" name="date"/>   
  34. </body>  
  35. </html>  

示例图：
 

版权声明：本文为博主原创文章，未经博主允许不得转载。