本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>