一款简要大气的jquery日期日历插件
一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js
查看效果网址:
http://keleyi.com/a/bjad/emf1jc13.htm
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一款简洁大气的jquery日期日历插件-柯乐义 </title> <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqtexiao/21/css/manhuaDate.1.0.css"> <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/21/js/manhuaDate.1.0.js"></script> <script type="text/javascript"> $(function () { $("input.mh_date").manhuaDate({ Event: "click", //可选 Left: 0, //弹出时间停靠的左边位置 Top: -16, //弹出时间停靠的顶部边位置 fuhao: "-", //日期连接符默认为- isTime: false, //是否开启时间值默认为false beginY: 1949, //年份的开始默认为1949 endY: 2100//年份的结束默认为2049 }); }); </script> </head> <body> <div> <h1> 一款简洁大气的jquery日期日历插件·柯乐义</h1> <input type="text" class="mh_date" readonly="true" /> <input type="text" class="mh_date" readonly="true" /> <input type="text" class="mh_date" readonly="true" /> <input type="text" class="mh_date" readonly="true" /> <br /> <br /> <br /> <br /> <br /> </div> <div style="width: 600px; margin: 0 auto; text-align: center; font-size: 12px;"> <p> 由柯乐义整理,查看更多特效:【<a href="http://keleyi.com/" target="_blank">柯乐义</a>】<a href="http://keleyi.com/a/bjad/emf1jc13.htm" target="_blank">原文</a></p> <p> *尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流</p> <p> </p> </div> </body> </html>