Yahoo UI カレンダー参照 ( version: 2.8.0r4 )


  Yahoo UI は少し面倒ですが、カレンダーで日付を参照します




初期値を選択するようにしていますが、日付チェックが完全では無いので注意して下さい
new Date( x ) で、x は 2010/01/0a でもエラーになりません。2010/01/ ではエラーになる
ので、その場合は当日を選択するようになっています

Yahoo UI カレンダー参照 ( version: 2.8.0r4 )

cal.css は、サンプルコードから取りだしたものですが必要です

しかし、日付入力する為にしては、あまりに大げさすぎるという印象です。

年と月と日をコンボボックスにしたほうが、入力ミスも無いと思います。
しかし、どうしても見栄えを重視したいのであれば、他のコントロールの事
を考えて、Flex の DateChooser を使ったほうが簡単だと思います。

また、イントラネットであれば Microsoft の DatePicker コントロールを
使う方法もあります。さらにカレンダーの機能だけであれば、自分で作
ってしまうのもそれほど難しくは無いかもしれません。

多少特別な知識が必要になりますが、この中では、Flex がおすすめですね。








  設置ソースコード




<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/calendar/calendar-min.js"></script>

<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/cal.css" />

<script type="text/javascript">
// ******************************************************
// body に yui-skin-sam クラスが必要なので追加しています
// ******************************************************
document.body.className = document.body.className + " yui-skin-sam";

// ******************************************************
// 実装部分です
// ******************************************************
YAHOO.util.Event.onDOMReady(function(){

	var Event = YAHOO.util.Event,
		Dom = YAHOO.util.Dom,
		dialog,
		calendar;

	var showBtn = Dom.get("show");

	Event.on(showBtn, "click", function() {

		if (!dialog) {

			Event.on(document, "click", function(e) {
				var el = Event.getTarget(e);
				var dialogEl = dialog.element;
				if (el != dialogEl && !Dom.isAncestor(dialogEl, el) && el != showBtn && !Dom.isAncestor(showBtn, el)) {
					dialog.hide();
				}
			});

			function resetHandler() {
				var selDates = calendar.getSelectedDates();
				var resetDate;
		
				if (selDates.length > 0) {
				resetDate = selDates[0];
				} else {
				resetDate = calendar.today;
				}
		
				calendar.cfg.setProperty("pagedate", resetDate);
				calendar.render();
			}
		
			function closeHandler() {
				dialog.hide();
			}

			dialog = new YAHOO.widget.Dialog("container", {
				visible:false,
				context:["show", "tl", "bl"],
				buttons:
					[
						{text:"Reset", handler: resetHandler, isDefault:true},
						{text:"Close", handler: closeHandler}
					],
				draggable:false,
				close:true
			});
			dialog.setHeader('\u65e5\u4ed8\u3092\u9078\u629e\u3057\u3066\u4e0b\u3055\u3044');
			dialog.setBody('<div id="cal"></div>');
			dialog.render(document.body);

			// ******************************************************
			// カレンダーが表示される時の初期処理
			// ※ 現在の値でカレンダーを選択する
			// ******************************************************
			dialog.showEvent.subscribe(function() {

				var str = document.getElementById("date").value;
				// 正しい日付が設定されていた場合
				// ※ 厳密なチェツクではありません。
				// ※ 個別に日付文字列チェックを行ってここに反映させて下さい
				var dt = new Date(str);
				if ( !isNaN(dt) ) {
					calendar.cfg.setProperty('selected', str);
					calendar.cfg.setProperty('pagedate', dt, true);
					calendar.render();
				
					if (YAHOO.env.ua.ie) {
				
						dialog.fireEvent("changeContent");
				
				
					}

				}
				else {
					dt = new Date();
					calendar.cfg.setProperty('pagedate', dt, true);
					calendar.render();
				
					if (YAHOO.env.ua.ie) {
				
						dialog.fireEvent("changeContent");
				
				
					}
				}
			});

		}

		if (!calendar) {

			calendar = new YAHOO.widget.Calendar("cal", {
				iframe:false,	  // Turn iframe off, since container has iframe support.
				hide_blank_weeks:true  // Enable, to demonstrate how we handle changing height, using changeContent
			});

			calendar.cfg.setProperty("MDY_YEAR_POSITION", 1);
			calendar.cfg.setProperty("MDY_MONTH_POSITION", 2);
			calendar.cfg.setProperty("MDY_DAY_POSITION", 3);

			calendar.cfg.setProperty("MY_YEAR_POSITION", 1);
			calendar.cfg.setProperty("MY_MONTH_POSITION", 2);

			// Date labels for Japanese locale

			calendar.cfg.setProperty("MONTHS_SHORT",   ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]);
			calendar.cfg.setProperty("MONTHS_LONG",	["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
			calendar.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
			calendar.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
			calendar.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
			calendar.cfg.setProperty("WEEKDAYS_LONG",  ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);

			// Month/Year label format for Japan
			calendar.cfg.setProperty("MY_LABEL_YEAR_POSITION",  1);
			calendar.cfg.setProperty("MY_LABEL_MONTH_POSITION",  2);
			calendar.cfg.setProperty("MY_LABEL_YEAR_SUFFIX",  "\u5E74");
			calendar.cfg.setProperty("MY_LABEL_MONTH_SUFFIX",  "");

			calendar.render();

			// ******************************************************
			// ここで選択した日付を "date" フィールドに転送しています
			// ******************************************************
			calendar.selectEvent.subscribe(function() {
				if (calendar.getSelectedDates().length > 0) {

					var selDate = calendar.getSelectedDates()[0];

					// Pretty Date Output, using Calendar's Locale values: Friday, 8 February 2008
					var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
					var dStr = selDate.getDate() + "";
					if ( dStr.length == 1 ) {
						dStr = "0" + dStr;
					}
					var mStr = calendar.cfg.getProperty("MONTHS_SHORT")[selDate.getMonth()];
					var yStr = selDate.getFullYear();
		
					Dom.get("date").value = yStr+ "/" + mStr + "/" + dStr;
				}
				else {
					Dom.get("date").value = "";
				}
				dialog.hide();
			});

			calendar.renderEvent.subscribe(function() {
				// Tell Dialog it's contents have changed, which allows 
				// container to redraw the underlay (for IE6/Safari2)
				dialog.fireEvent("changeContent");
			});
		}

		var seldate = calendar.getSelectedDates();

		if (seldate.length > 0) {
			calendar.cfg.setProperty("pagedate", seldate[0]);
			calendar.render();
		}

		dialog.show();
	});
});
</script>

Yahoo UI カレンダー参照
<input type="text" id="date" name="date" value="2009/01/01" />
<button type="button" id="show" title="Show Calendar">
<img src="http://lightbox.on.coocan.jp/yui/assets/calbtn.gif">
</button>
( version: 2.8.0r4 )





yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[sh_web]
CCBot/2.0 (http://commoncrawl.org/faq/)
17/08/21 22:45:07
InfoBoard Version 1.00 : Language=Perl

BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube