suchen

Heim >Web-Frontend >js-Tutorial >jquery-Kalender-Plug-in-Datepicker-Verwendungsanalyse_jquery

jquery-Kalender-Plug-in-Datepicker-Verwendungsanalyse_jquery

WBOY
WBOYOriginal
2016-05-16 15:18:431780Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des JQuery-Kalender-Plug-Ins Datepicker. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe mehrere Kalender-Plug-Ins verwendet, einige sind zu ausgefallen, einige sind zu einfach, einige sind nicht mit Browsern kompatibel usw. Keines davon hat mich zufriedengestellt. Später hat mir ein Kollege jquery.datepick empfohlen Plug-in von der offiziellen Website und ich habe es selbst ausprobiert. Die Logik und der Stil können vollständig getrennt werden. Es unterstützt Sprachen in 30 Ländern und kann grundsätzlich meine Anforderungen erfüllen.

Hier ist die Download-Adresse dieser Website: http://www.jb51.net/jiaoben/19622.html

Entpacken Sie jquery.datepick.package-3.5.2.zip. Der Standardwert ist jquery.datepick-zh-CN.js. Durch Hinzufügen kann der englische Kalender in eine chinesische Version geändert werden 🎜>http://demo.jb51.net/js/2011/jQuery_calendar/index.html

Der Beispielcode lautet wie folgt: 

<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>
Hinweis: Im Datepick-Plugin müssen viele Parameter eingestellt werden, die von den persönlichen Bedürfnissen abhängen. Einzelheiten finden Sie auf der offiziellen Website von jquery

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

Leser, die an weiteren Inhalten zu jQuery-Plug-ins interessiert sind, können sich das Spezialthema dieser Website ansehen: „

Zusammenfassung gängiger jQuery-Plug-ins und deren Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery verwendet den Oop-Modus, die Klassenverwendung example_jqueryNächster Artikel：jquery verwendet den Oop-Modus, die Klassenverwendung example_jquery

In Verbindung stehende Artikel

Mehr sehen