recherche

Maison >interface Web >js tutoriel >utilisation du plug-in de calendrier jquery analyse_jquery

utilisation du plug-in de calendrier jquery analyse_jquery

WBOY
WBOYoriginal
2016-05-16 15:18:431857parcourir

L'exemple de cet article décrit l'utilisation du plug-in datepicker du calendrier jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

J'ai utilisé plusieurs plug-ins de calendrier, certains sont trop sophistiqués, certains sont trop simples, certains sont incompatibles avec les navigateurs, etc. Aucun d'entre eux ne m'a satisfait. Plus tard, un collègue m'a recommandé jquery.datepick. plug-in du site officiel et je l'ai essayé moi-même. Cela semble plutôt bien. La logique et le style peuvent être complètement séparés, et il prend en charge les langues dans 30 pays et peut essentiellement répondre à mes exigences.

Voici l'adresse de téléchargement de ce site : http://www.jb51.net/jiaoben/19622.html

Décompressez jquery.datepick.package-3.5.2.zip. La valeur par défaut est le calendrier anglais. Il y a jquery.datepick-zh-CN.js L'ajout de ceci peut changer l'adresse de démonstration en chinois ：http://demo.jb51.net/js/2011/jQuery_calendar/index.html

L'exemple de code est le suivant : 

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

Remarque : Il existe de nombreux paramètres à définir dans le plug-in datepick, qui dépendent des besoins personnels. Pour plus de détails, veuillez vous référer au site officiel de jquery http://docs.jquery.com/UI/Datepicker#options

Les lecteurs intéressés par plus de contenu lié aux plug-ins jQuery peuvent consulter le sujet spécial de ce site : " Résumé des plug-ins jQuery courants et de leur utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery utilise la classe en mode oop, utilisation de la classe example_jqueryArticle suivant：jquery utilise la classe en mode oop, utilisation de la classe example_jquery

Articles Liés

Voir plus