本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js
查看效果网址:
http://keleyi.com/a/bjad/emf1jc13.htm
示例代码如下:
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=utf-8" /> 5 <title>一款简洁大气的jquery日期日历插件-柯乐义 </title> 6 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqtexiao/21/css/manhuaDate.1.0.css"> 7 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script> 8 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/21/js/manhuaDate.1.0.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 12 $("input.mh_date").manhuaDate({ 13 Event: "click", //可选 14 Left: 0, //弹出时间停靠的左边位置 15 Top: -16, //弹出时间停靠的顶部边位置 16 fuhao: "-", //日期连接符默认为- 17 isTime: false, //是否开启时间值默认为false 18 beginY: 1949, //年份的开始默认为1949 19 endY: 2100//年份的结束默认为2049 20 }); 21 22 }); 23 </script> 24 </head> 25 <body> 26 <div> 27 <h1> 28 一款简洁大气的jquery日期日历插件·柯乐义</h1> 29 <input type="text" class="mh_date" readonly="true" /> 30 <input type="text" class="mh_date" readonly="true" /> 31 <input type="text" class="mh_date" readonly="true" /> 32 <input type="text" class="mh_date" readonly="true" /> 33 <br /> 34 <br /> 35 <br /> 36 <br /> 37 <br /> 38 </div> 39 <div style="width: 600px; margin: 0 auto; text-align: center; font-size: 12px;"> 40 <p> 41 由柯乐义整理,查看更多特效:【<a href="http://keleyi.com/" target="_blank">柯乐义</a>】<a href="http://keleyi.com/a/bjad/emf1jc13.htm" target="_blank">原文</a></p> 42 <p> 43 *尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流</p> 44 <p> 45 </p> 46 </div> 47 </body> 48 </html>