我用過好幾種日歷插件，有的太花哨，有的太簡單，有的瀏覽器不兼容等等，沒有一個(gè)能讓我感到滿意的，后來同事給我推薦了jquery.datepick這個(gè)插件，我從官方網(wǎng)站下了一個(gè)，親自做了一下，感覺相當(dāng)?shù)牟诲e(cuò)，邏輯和樣式可以完全分開，并且非常的靈活，支持30個(gè)國家的語言，基本能滿足我的要求。

這里給出本站下載地址：http://chabaoo.cn/jiaoben/19622.html

解壓jquery.datepick.package-3.5.2.zip，默認(rèn)是英文的日歷，里面有一個(gè)jquery.datepick-zh-CN.js，加上這個(gè)可以把英文的變以成中文的，演示地址：http://demo.jb51.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="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
var nowdays = new Date();
var dateConfig = {
 showOn: 'both',        //二個(gè)都顯示
 buttonImage: 'calendar.gif', //加載圖片
 buttonImageOnly: true,    //顯示圖片的地方有一個(gè)突出部分，這個(gè)就是隱藏那玩意的
 changeFirstDay: false,    //這個(gè)參數(shù)干什么的呢，星期一是日歷的第一個(gè)，不可以改動(dòng)的
 numberOfMonths: 2,      //顯示二個(gè)月，默認(rèn)一個(gè)月
 minDate: nowdays,       //顯示最小時(shí)間是今天
 dateFormat: 'yy-mm-dd',    //日期格式
 yearRange: '-20:+20'     //前后20年，不過這根minDate是今天有沖突，自己去試吧。
};
 $('#goodplugin').datepick(dateConfig);
 $('#showdate').datepick(dateConfig);
});
</script>
<link type="text/css" href="smoothness.datepick.css" rel="stylesheet" />
</head>
<body>
<h1>jquery 日歷插件舉例</h1>
<br>
<a href="datepick1.html">樣式1</a>
<br>
<a href="datepick2.html">樣式2</a>
<br>
<a href="datepick3.html">樣式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è)置，這個(gè)要根據(jù)個(gè)人的需要了。具體請參考jquery的官方網(wǎng)址http://docs.jquery.com/UI/Datepicker#options

更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: