jQuery の日付 picker_jquery の詳細な分析-jsチュートリアル-php.cn

jQuery の日付 picker_jquery の詳細な分析

WBOY

リリース： 2016-05-16 17:31:54

オリジナル

1272 人が閲覧しました

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 ダイアログ