jqueryカレンダープラグインdatepickerの使用法analyze

jqueryカレンダープラグインdatepickerの使用法analyze_jquery

WBOY

リリース： 2016-05-16 15:18:43

オリジナル

1726 人が閲覧しました

この記事の例では、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>

ログイン後にコピー

注: datepick プラグインには、個人のニーズに応じて設定するパラメーターが多数あります。詳細については、jquery の公式 Web サイト

http://docs.jquery.com/UI/Datepicker#optionsを参照してください。

jQuery プラグインに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「

一般的な jQuery プラグインと使用法の概要」をチェックしてください。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。