JavaScript + Ajax 実践サンプル集 - ドロップダウンカレンダー

ドロップダウンカレンダー

説明補足説明コード分割コードその他関連書籍コメント投稿

このサンプルは、テキストボックスにフォーカスを移動すると自動的にドロップダウンカレンダーを表示します。カレンダーから日付を選択すると、テキストボックスに表示して自動的に閉じます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

function initDoc() {
	YAHOO.myCalendar.cal1 = new YAHOO.widget.Calendar("cal1","Container", { title:"日付を選択してください", close:true } );
	YAHOO.myCalendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.myCalendar.cal1, true);

YAHOO.myCalendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
	YAHOO.myCalendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
	YAHOO.myCalendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);

YAHOO.myCalendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
	YAHOO.myCalendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);

YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_SHORT",   ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_LONG",    ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["日","月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["日","月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_LONG",  ["日","月", "火", "水", "木", "金", "土"]);

YAHOO.myCalendar.cal1.render();
	YAHOO.util.Event.addListener("txtDate", "focus", handleFocus, YAHOO.myCalendar.cal1, true);
}

function handleFocus(type,args,obj) {
  YAHOO.myCalendar.cal1.show();
}

function handleSelect(type,args,obj) {
	var dates = args[0]; 
	var date = dates[0];
	var year = date[0], month = date[1], day = date[2];

var txtDate = document.getElementById("txtDate");
  txtDate.value = year + "/" + month + "/" + day;
  YAHOO.myCalendar.cal1.hide();
}	
</script>
</head>
<body style="margin:10px;">	
<input id="txtDate" type="text" class="textbox" />    
<div id="Container"></div>
</body>
</html>

CSS部HEAD部BODY部その他

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
<link type="text/css" rel="stylesheet" href="yui/build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="yui/build/reset/reset.css">		
<link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/calendar.css">
<style>	
.textbox { width: 162px;}			
#Container { display:none; position:absolute; left:10px; top:30px; }
</style>

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js" ></script>
<script type="text/javascript" src="yui/build/dom/dom.js" ></script>
<script type="text/javascript" src="yui/build/calendar/calendar.js"></script>

<script>
YAHOO.namespace("myCalendar");
YAHOO.util.Event.addListener(window, "load", initDoc);

function initDoc() {
	YAHOO.myCalendar.cal1 = new YAHOO.widget.Calendar("cal1","Container", { title:"日付を選択してください", close:true } );
	YAHOO.myCalendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.myCalendar.cal1, true);

	YAHOO.myCalendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
	YAHOO.myCalendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
	YAHOO.myCalendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);

	YAHOO.myCalendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
	YAHOO.myCalendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);

	YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_SHORT",   ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("MONTHS_LONG",    ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["日","月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["日","月", "火", "水", "木", "金", "土"]);
	YAHOO.myCalendar.cal1.cfg.setProperty("WEEKDAYS_LONG",  ["日","月", "火", "水", "木", "金", "土"]);

	YAHOO.myCalendar.cal1.render();
	YAHOO.util.Event.addListener("txtDate", "focus", handleFocus, YAHOO.myCalendar.cal1, true);
}				

function handleFocus(type,args,obj) {
  YAHOO.myCalendar.cal1.show();
}				

function handleSelect(type,args,obj) {
	var dates = args[0]; 
	var date = dates[0];
	var year = date[0], month = date[1], day = date[2];

  var txtDate = document.getElementById("txtDate");
  txtDate.value = year + "/" + month + "/" + day;
  YAHOO.myCalendar.cal1.hide();
}	
</script>

このサンプルを編集して試してみる!

テキストボックスがフォーカスを取得したとき、ドロップダウンカレンダーを表示するには、addListener()メソッドを実行してonfocusのイベントハンドラを登録します。カレンダーを表示するにはshow()メソッド、非表示にするにはhide()メソッドを使用します。

YAHOO.util.Event.addListener(
  "txtDate", "focus", handleFocus, 
  YAHOO.myCalendar.cal1, true);

YAHOO.myCalendar.cal1.show();
YAHOO.myCalendar.cal1.hide();

このサンプルを実行するには、下記サイトからYahoo! UI Libraryをダウンロードする必要があります。

http://developer.yahoo.com/yui/

初めてのJavaScript―Ajax&DOM対応

JavaScript + Ajax 実践サンプル集 (907本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ドロップダウンカレンダー

JavaScript + Ajax 実践サンプル集 (907本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ドロップダウンカレンダー

JavaScript + Ajax 実践サンプル集 (907本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...