jquery日曆外掛程式datepicker用法分析_jquery
- WBOY原創
- 2016-05-16 15:18:431752瀏覽
本文實例講述了jquery日曆外掛程式datepicker用法。分享給大家參考，具體如下：
我用過好幾種日曆插件，有的太花哨，有的太簡單，有的瀏覽器不相容等等，沒有一個能讓我感到滿意的，後來同事給我推薦了jquery.datepick這個插件，我從官方網站下了一個，親自做了一下，感覺相當的不錯，邏輯和样式可以完全分開，並且非常的靈活，支持30個國家的語言，基本能滿足我的要求。
這裡給出本站下載網址：http://www.jb51.net/jiaoben/19622.html
解壓縮jquery.datepick.package-3.5.2.zip，預設是英文的日曆，裡面有一個jquery.datepick-zh-CN.js，加上這個可以把英文的變以成中文的，示範地址：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', //二个都显示
buttonImage: 'calendar.gif', //加载图片
buttonImageOnly: true, //显示图片的地方有一个突出部分，这个就是隐藏那玩意的
changeFirstDay: false, //这个参数干什么的呢，星期一是日历的第一个，不可以改动的
numberOfMonths: 2, //显示二个月，默认一个月
minDate: nowdays, //显示最小时间是今天
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>左边直接显示，右边要点击<input type="text" id="goodplugin"/></div>
</body>
</html>
說明：datepick插件裡面有好多參數要設置，這個要根據個人的需要了。詳情請參考jquery的官方網址http://docs.jquery.com/UI/Datepicker#options
更多關於jQuery外掛相關內容有興趣的讀者可查看本站專題：《jQuery常用外掛及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn