一款简洁大气的jquery日期日历插件

浏览数：26 / 时间：2015年06月09日

本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" />&nbsp;
30 <input type="text" class="mh_date" readonly="true" />&nbsp;
31 <input type="text" class="mh_date" readonly="true" />&nbsp;
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>