datepick

来源:互联网 发布:php如何加密源码授权 编辑:程序博客网 时间:2024/05/13 15:02

我用过好几种日历插件,有的太花哨,有的太简单,有的浏览器不兼容等等,没有一个能让我感到满意的,后来同事给我推荐了jquery.datepick这个插件,我从官方网站下了一个,亲自做了一下,感觉相当的不错,逻辑和样式可以完全分开,并且非常的灵活,支持30个国家的语言,基本能满足我的要求。

下载地址是:www.jquery.com

解压jquery.datepick.package-3.5.2.zip,默认是英文的日历,里面有一个jquery.datepick-zh-CN.js,加上这个可以把英文的变以成中文的,例子:http://blog.51yip.com/demo/datepick/datepick1.html

代码如下,当然你也可以根据我上面提供的例子,把网页另存为来查看代码

查看复制打印?
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>jQuery Datepicker</title>  
  5. <script type="text/javascript" src="jquery-1.3.2.js"></script>  
  6. <script type="text/javascript" src="jquery.datepick.js"></script>  
  7. <script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>  
  8. <script type="text/javascript">  
  9. $(function() {  
  10. var nowdays = new Date();  
  11. var dateConfig = {  
  12.  showOn: 'both',               //二个都显示  
  13.  buttonImage: 'calendar.gif',  //加载图片  
  14.  buttonImageOnly: true,        //显示图片的地方有一个突出部分,这个就是隐藏那玩意的  
  15.  changeFirstDay: false,        //这个参数干什么的呢,星期一是日历的第一个,不可以改动的  
  16.  numberOfMonths: 2,            //显示二个月,默认一个月  
  17.  minDate: nowdays,             //显示最小时间是今天  
  18.  dateFormat: 'yy-mm-dd',       //日期格式  
  19.  yearRange: '-20:+20'          //前后20年,不过这根minDate是今天有冲突,自己去试吧。  
  20. };  
  21.   
  22.  $('#goodplugin').datepick(dateConfig);  
  23.  $('#showdate').datepick(dateConfig);  
  24. });  
  25. </script>  
  26. <link type="text/css" href="smoothness.datepick.css" rel="stylesheet" />  
  27. </head>  
  28. <body>  
  29. <h1>jquery 日历插件举例</h1>  
  30. <br>  
  31. <a href="datepick1.html">样式1</a>  
  32. <br>  
  33. <a href="datepick2.html">样式2</a>  
  34. <br>  
  35. <a href="datepick3.html">样式3</a>  
  36. <br><br><br>  
  37. <div id="showdate"></div>  
  38. <br>  
  39. <br>  
  40. <div>左边直接显示,右边要点击<input type="text" id="goodplugin"/></div>  
  41. </body>  
  42. </html>  

说明:datepick插件里面有好多参数要设置,这个要根据个人的需要了。具体请参考jquery的官方网址,

http://docs.jquery.com/UI/Datepicker#options

原创粉丝点击