2010.01.03 Sunday | 20:35

  Yahoo UI ポップアップカレンダー プログラマ







<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">

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");
				
				
					}

				}
			});

		}

		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();

			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>

<div class="box">
<div class="datefield">
	  <label for="date">Date: </label><input type="text" id="date" name="date" value="" /><button type="button" id="show" title="Show Calendar"><img src="http://lightbox.on.coocan.jp/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
Yahoo UI でカレンダーフィールドは結構面倒です
上記コードは日本語用にチューニングしています。
cal.css は、サンプルコードから取りだしたものですが必要です

document.body.className = document.body.className + " yui-skin-sam";

で、動的に BODY にクラスを追加しています。
( これも必要です )

実際に使うにはもうすこしコードチューニングが必要で
カレンダーダイアログを開く時に、フィールドの日付
を採用する必要があります
dialog.showEvent.subscribe(function() {

	calendar.cfg.setProperty('selected', '2009/2/5');
	calendar.cfg.setProperty('pagedate', new Date('2009/2/5'), true);
	calendar.render();

	if (YAHOO.env.ua.ie) {

		dialog.fireEvent("changeContent");


	}
});