本文實(shí)例講述了jquery日歷插件datepicker用法。分享給大家供大家參考,具體如下:
我用過好幾種日歷插件,有的太花哨,有的太簡單,有的瀏覽器不兼容等等,沒有一個能讓我感到滿意的,后來同事給我推薦了jquery.datepick這個插件,我從官方網(wǎng)站下了一個,親自做了一下,感覺相當(dāng)?shù)牟诲e,邏輯和樣式可以完全分開,并且非常的靈活,支持30個國家的語言,基本能滿足我的要求。
這里給出本站下載地址:http://www.gimoo.net/jiaoben/19622.html
解壓jquery.datepick.package-3.5.2.zip,默認(rèn)是英文的日歷,里面有一個jquery.datepick-zh-CN.js,加上這個可以把英文的變以成中文的,演示地址:http://demo.gimoo.net/js/2011/jQuery_calendar/index.html
示例代碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery Datepicker</title> <script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery.datepick.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery.datepick-zh-CN.js"></script> <script type="text/javascript"> $(function() { var nowdays = new Date(); var dateConfig = { showOn: 'both', //二個都顯示 buttonImage: 'calendar.gif', //加載圖片 buttonImageOnly: true, //顯示圖片的地方有一個突出部分,這個就是隱藏那玩意的 changeFirstDay: false, //這個參數(shù)干什么的呢,星期一是日歷的第一個,不可以改動的 numberOfMonths: 2, //顯示二個月,默認(rèn)一個月 minDate: nowdays, //顯示最小時(shí)間是今天 dateFormat: 'yy-mm-dd', //日期格式 yearRange: '-20:+20' //前后20年,不過這根minDate是今天有沖突,自己去試吧。 }; $('#goodplugin').datepick(dateConfig); $('#showdate').datepick(dateConfig); }); </script> <link type="text/css" rel="stylesheet" /> </head> <body> <h1>jquery 日歷插件舉例</h1> <br> <a >樣式1</a> <br> <a >樣式2</a> <br> <a >樣式3</a> <br><br><br> <div id="showdate"></div> <br> <br> <div>左邊直接顯示,右邊要點(diǎn)擊<input type="text" id="goodplugin"/></div> </body> </html>
說明:datepick插件里面有好多參數(shù)要設(shè)置,這個要根據(jù)個人的需要了。具體請參考jquery的官方網(wǎng)址http://docs.jquery.com/UI/Datepicker#options
更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。