ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryカレンダープラグインdatepickerの使用法analyze_jquery
jqueryカレンダープラグインdatepickerの使用法analyze_jquery
- WBOYオリジナル
- 2016-05-16 15:18:431784ブラウズ
この記事の例では、jquery カレンダー プラグインの datepicker の使用方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
私はいくつかのカレンダー プラグインを使用しましたが、派手すぎるもの、シンプルすぎるもの、ブラウザと互換性のないものなどがありました。その後、同僚が jquery.datepick を勧めてくれました。公式ウェブサイトからプラグインを入手して実際に試してみましたが、ロジックとスタイルを完全に分離でき、非常に柔軟で、30 か国の言語をサポートしており、基本的に私の要件を満たしています。
この Web サイトのダウンロード アドレスは次のとおりです: 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>
http://docs.jquery.com/UI/Datepicker#optionsを参照してください。
jQuery プラグインに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「一般的な jQuery プラグインと使用法の概要」 をチェックしてください。
この記事が jQuery プログラミングのすべての人に役立つことを願っています。声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。