生活随笔
收集整理的這篇文章主要介紹了
一款简洁大气的jquery日期日历插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本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> web前端：http://www.cnblogs.com/jihua/p/webfront.html
轉載于:https://www.cnblogs.com/jihua/p/manhuadate.html
總結
以上是生活随笔為你收集整理的一款简洁大气的jquery日期日历插件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
