ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery の日付 picker_jquery の詳細な分析

jQuery の日付 picker_jquery の詳細な分析

WBOY
WBOYオリジナル
2016-05-16 17:31:541207ブラウズ

1: デフォルトでは、日付入力テキスト ボックスがページ フォーカスを取得すると、日付ピッカー コンポーネントはオーバーレイ でカレンダー選択パネルを開きます。ボックス ボックスがフォーカスを失った場合、または日付が選択された場合、カレンダー選択パネルは自動的に閉じられます
$(selector).datepicker([options]);
簡単な例:

コードをコピー コードは次のとおりです:


< ;html xmlns="http://www.w3.org/1999/xhtml">

DatePicker Local


<スクリプト タイプ="text/javascript" src="JS/jquery.ui.core.js">




日付を入力してください:




レンダリング:


2: ポップアップ日付ピッカーの画像ボタンを指定します
応答リソース ファイルを追加する必要があります:
コードをコピーします コードは次のとおりです。

$(document).ready(function() {
$("#datepicker" ).datepicker({
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true
});
});

コードをコピー コードは次のとおりです:





DatePickerIcon








请选择一个日期:



效果图:


3:显示带年、月份下拉列表および按钮面板の日期選択择器
复制發 代码如下:



<頭>
< ;meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
DatePicker Local








请输入一日期:



效果图:

4:同時に表示複数の月份の日期選択器
复制代代码如下:





DatePickerButton








日付を選択してください:



レンダリング:


5: 日付ピッカーの一部のメソッド
ダイアログ、isDisabled、非表示、表示、更新、getDate、setDate
コードをコピー コードは次のとおりです:




DatePicker ダイアログ</ title><br><link rel="stylesheet" type="text/css" href="主題/ui-lightness/jquery.ui.all.css"/><br><script type="text /javascript " src="JS/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="JS/jquery.ui.core.js "> ;</script><br><script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script><br><script type=" text/ javascript"><br>$(document).ready(function(){<br> $("#inputDate").datepicker(); <br> $("#showDialog").click(function( ){ <br> $("#inputDate").datepicker("dialog","",function(dateText, inst){<br> $("#inputDate").val(dateText);<br> }) ;<br> });<br>});<br></script><br><style><br>*{ font-size:12px }<br></style>< ;/head><br><body><br>日付を入力してください: <br><input type="text" id="inputDate" /><br><button id="showDialog "> ;表示</button><br></body><br></html><br><br> </div> <br>レンダリング: <strong><br> </strong><img alt="" src="http://files.jb51.net/file_images/article/201306/2013061916185926.png"> <br><br><strong>6: 日付ピッカーの一部のイベント<font style="max-width:90%"><br></font>6.1 beforeShow イベント: このイベントは、日付ピッカーが表示される前にトリガーされます。 </strong>6.2 beforeShowDay イベント: このイベントは、日付ピッカー関数 (date) で毎日が選択される前にトリガーされます。 {}<br>6.3 onChangeMonth Year: このイベントは、日付ピッカー関数で新しい年または月の関数が選択されたときにトリガーされます( year , month, inst);<br>6.4 onClose イベント: このイベントは、日付ピッカー コントロールが閉じられるとトリガーされます。 function(dataText, inst) {}<br>6.5 onSelect イベント: このイベントは、日付ピッカーが日付を選択するとトリガーされます。 function(dataText, inst) {} //dataText は選択した日付の文字列、inst は日付ピッカー インスタンスです<br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="29229" class="copybut" id="copybut29229" onclick="doCopy('code29229')">コードをコピー<u></u></a> コードは次のとおりです: </span><div class="codebody" id="code29229"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" コンテンツ="text/html; charset=gb2312" /><br><title>DatePicker ダイアログ















声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。