jquery kalendar plug-in datepicker analisis penggunaan

jquery kalendar plug-in datepicker analisis penggunaan_jquery

WBOY

Lepaskan： 2016-05-16 15:18:43

asal

1756 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan pemetik tarikh pemalam kalendar jquery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya telah menggunakan beberapa pemalam kalendar, ada yang terlalu mewah, ada yang terlalu ringkas, ada yang tidak serasi dengan penyemak imbas, dsb. Tiada seorang pun yang memuaskan hati saya Kemudian, rakan sekerja mengesyorkan jquery.datepick kepada saya plug-in dari laman web rasmi dan mencubanya sendiri. Logik dan gayanya boleh dipisahkan sepenuhnya, dan ia menyokong bahasa di 30 negara dan pada dasarnya boleh memenuhi keperluan saya.

Berikut ialah alamat muat turun tapak web ini: http://www.jb51.net/jiaoben/19622.html

Nyahzip jquery.datepick.package-3.5.2.zip lalai ialah kalendar bahasa Inggeris. Terdapat jquery.datepick-zh-CN.js di dalamnya 🎜>http://demo.jb51.net/js/2011/jQuery_calendar/index.html

Kod sampel adalah seperti berikut:

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

Salin selepas log masuk

Nota: Terdapat banyak parameter untuk ditetapkan dalam pemalam datepick, yang bergantung pada keperluan peribadi. Untuk butiran, sila rujuk tapak web rasmi jquery

http://docs.jquery.com/UI/Datepicker#options

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan pemalam jQuery boleh menyemak topik khas tapak ini: "

Ringkasan pemalam dan penggunaan jQuery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.