jQueryカレンダープラグインdatepickerの使い方を詳しく解説_jquery

jQuery は稀有で優れた JavaScript スクリプト開発ライブラリであり、これをベースにした多くのプラグインも非常に標準化されており、優れています。datepicker プラグインなど、この美しさを見逃すのは残念です。

一般に、MIS システムのフロントエンド、特にユーザー登録ページには、「誕生月と年」などの日付入力ボックスがあります。最も簡単な方法は、 タグを使用してこれを行うには、多くの欠点があります。第一に、データベースのフィールド タイプとの一致、第二に、「13 番目の月」や閏年などの入力日付の正当性などです。検討に値する場所。現在一般的なアプローチは、ドロップダウン メニューを使用することですが、このアプローチは対話性、複雑さ、移植性の点で不十分です。ダウン メニューを構築する必要があり、日付の有効性を処理するために多数のスクリプトを作成する必要があります。

Datepicker は素晴らしい春をもたらします。デフォルトのスタイルを使用したときにどのように見えるかを見てみましょう:

完全に GUI のようなユーザー エクスペリエンス、目を見張るようなダイナミックな表示効果、正確な日付制御、および非常に柔軟なパラメーター構成により、日付ピッカーは有名な Google を含む多くの開発者によって Google カレンダー プロジェクトで愛用されています。このスクリプトは で使用されています。興味のある方はぜひチェックしてみてください。ちなみに、上の図のデフォルトの効果はJavaScriptで文章を書くことで実現できます。 興味があればフォローしてみてはいかがでしょうか:

1. 言うまでもなく、Datepicker は軽量のプラグインです。次に、Datepicker (jQuery1.2.6_min を含む) をダウンロードします。公式ウェブサイト: http://marcgrabanski.com/pages/code/jquery-ui-datepicker。

2. ダウンロードした 2 つの js を HTML で引用します。

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3. HTMLにデフォルトのスタイルシートファイルを導入します。このファイルも公式Webサイトからダウンロードすると、ホームページ上でCSSを選択することができます。他のスキン:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4. HTML にテキスト フィールドを挿入し、書式設定の混乱を避けるために、読み取り専用に設定し、ユーザーからの手動入力を受け付けないようにすることをお勧めします。

<input id="dateinput" type="text" readonly="readonly"/>

5. 最終的な効果を実現するための js コードを記述します。

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

これは基本的に日付入力テキストフィールドを完成させますが、さまざまな MIS システムに従って、一部のターゲットグループは中国語に変更することをお勧めします。先ほどの関数は次のようになります:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK、これで完了です。私が独自の要件に従って作成したページのコードは次のとおりです。参考用です。

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>



<input id="dateinput" type="text" readonly="readonly"/>

上記は jQuery カレンダー プラグイン datepicker の使い方を詳しく紹介したもので、皆様の学習に役立つことを願っています。