jQueryの日付セレクタ

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

$(document).ready(function(){
	$("#inputDate").datepicker({
		/*          */
		dayNamesMin : [" ", " ", " ", " ", " ", " ", " "],  
		/*         */
		firstDay : 1,
		/*            */
		monthNames : ["1 ", "2 ", "3 ", "4 ", "5 ", "6 ",
					"7 ", "8 ", "9 ", "10 ", "11 ", "12 "],
		/*          */
		showMonthAfterYear : true,
		/*        */
		yearSuffix : " ",
		/*        
		（         “ ” ，      ） */
		dateFormat : "yy MMdd "   
	});	
});







       ：

効果図:
  
2:ポップアップ日付セレクタのピクチャボタンの指定
応答を追加するリソースファイル:
         $(document).ready(function() {
                  $("#datepicker").datepicker({
                               showOn: "button",
                               buttonImage: "Images/calendar.gif",
                               buttonImageOnly: true
                 });
          });  
      

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





       ：

効果図:
   
3:年、月のドロップダウン・リストとボタン・パネルの日付セレクタを表示
   

$(document).ready(function(){
	$("#inputDate").datepicker({
		changeMonth: true,  //      
		changeYear: true,   //      
		showButtonPanel: true,  //      
		currentText: '  ',  //            
		closeText: '  ',    //          
		yearRange: 'c-60:c+20'
		
	});	
});







       ：

効果図:
  
4:複数月の日付セレクタを同時に表示
 

$(document).ready(function(){
	$( "#datepicker" ).datepicker({
		numberOfMonths : 3,  //       
		showCurrentAtPos : 1,  //          
		stepMonths : 3  //           
	});
});





       ：

効果図:
  
5:日付セレクタのいくつかの方法
    dialog, isDisabled, hide, show, refresh, getDate, setDate
   

$(document).ready(function(){
	$("#inputDate").datepicker();	
	$("#showDialog").click(function(){
		$("#inputDate").datepicker("dialog","",function(dateText, inst){
			$("#inputDate").val(dateText);
		});
	});
});







       ：


Show

効果図:
  
6:日付セレクタのイベント
6.1 beforeShowイベント:日付セレクタが表示される前にイベントがトリガーされます.
6.2 beforeShowDayイベント:日付セレクタで毎日選択する前にイベントfunction{}がトリガーされます.
6.3 onChangeMonthYear:日付セレクタが新しい年または月を選択すると、イベントfunction(year,month,inst)がトリガーされます.
6.4 onCloseイベント:日付セレクタコントロールをオフにすると、このイベントがトリガーされます.function(dataText, inst) {}
6.5 onSelectイベント:日付セレクタで日付が選択されているときにイベントがトリガーされます.function(dataText,inst){}//dataTextは選択した日付の文字列、instは日付セレクタのインスタンス
      $(document).ready(function(){ /* */ var hasLog=[{ month:10, day:1 }, { month:10, day:5 }, { month:10, day:20 }]; function hasToday(date){ /* */ for(var i in hasLog){ /* js Date 0-11， getDate() 1 */ if(hasLog[i].month == (date.getMonth()+1) && hasLog[i].day == date.getDate()){ return true; } } return false } $("#datepicker").datepicker({ beforeShowDay : function(date){ /* ， ， class */ var dat = new Date(date); var css ="" ; if(hasToday(dat)){ css="light_day"; } return [true, css]; }, onSelect : function(dateText,inst){ /* ， ， */ var dat = new Date(dateText); if(hasToday(dat)){ var msg=" ：" + dateText + "， "; $("#logList").text(msg); } } }); });
効果図: