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 )














   SQLの窓    create:2010/06/12  update:2015/11/02   管理者用(要ログイン)





フリーフォントWEBサービス

SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ