Flex4 : DateField を使ったHTML上での日付入力

Flex4 : DateField を使ったHTML上での日付入力

日時： 2011/05/22 08:09
名前： lightbox

拡張子:<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>ブラウザの開発者ツールを使った、Flex4 のデバッグテスト</title>
<style type="text/css">
* {
	font-family: "ＭＳ Ｐゴシック";
	font-size: 14px!important;
}
BODY {
	background-color: white;
	color: black;
}
#id_sample {
	border:solid 1px #C0C0C0;
}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" type="text/javascript"> 

// *******************************************************************
// Flex 内部より、HTML 上の入力フィールドに日付文字列を転送
// *******************************************************************
function setMyDate(str) {

	document.getElementById("mydate").value = str;
	closeMyDate();

}
// *******************************************************************
// Flex 内部より、HTML 上の DateField 表示エリアを確保
// *******************************************************************
function openMyDate() {

	document.getElementById("id_sample").width = 160;
	document.getElementById("id_sample").height = 210;

}

// *******************************************************************
// Flex 内部より、HTML 上の DateField 表示エリアをキャンセル
// *******************************************************************
function closeMyDate() {

	document.getElementById("id_sample").width = 30;
	document.getElementById("id_sample").height = 30;

}

// *******************************************************************
// HTML 上の 入力フィールド上にマウスカーソルが来たら全て閉じる
// *******************************************************************
function closeAll() {

	// HTML 上の表示エリア
	closeMyDate();
	// Flex 内の DateField
	document.getElementById("id_sample").close()

}

</script>
</head>

<body>

<div style='position:relative;'>
<div style='position:absolute;left:150px;top:17px;'>
<div id="flashcontent"></div>
</div>
<input id="mydate" type="text" style='position:absolute;left:10px;top:20px;'
 onmouseover='closeAll();'>
<input id="dummy" type="text" style='position:absolute;left:10px;top:60px;width:400px'
	value="この入力部分の上に、Flash のエリアが表示されます"
>
</div>

<script type="text/javascript">
var flashvars = {
};
var params = {
  allowScriptAccess:"always"
 ,bgcolor:"#ffffff"
}; 
var attributes = {
  id: "id_sample",
  name: "id_sample"
};
swfobject.embedSWF(
	"Main.swf?reload="+(new Date()).getTime(),
	"flashcontent", 
	"30",
	"30",
	"10.0.0",
	"",
	flashvars,
	params,
	attributes
);
</script>

</body>
</html>

mxml : DateField を使ったHTML上での日付入力 ( No.1 )

日時： 2011/05/22 08:13
名前： lightbox

拡張子:<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// Alert 用
	import mx.controls.*;
	// CloseEvent
	import 	mx.events.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		// 別ドメインから、close メソッドを実行可能なようにする
		Security.allowDomain("*");

		ExternalInterface.addCallback("close",
			function():void {
				dateField.close();
			}
		);

	}

	// *********************************************************
	// 選択した日付文字列の引き渡し
	// *********************************************************
	private function dateChanged(date:Date):void {

		// メソッドで編集する例
		var wk:String = DateField.dateToString(date,"YYYY/MM/DD");
		log(wk);

		// 編集済のプロパティを渡す
		ExternalInterface.call(
			"setMyDate", dateField.text
		);

	}

	// *********************************************************
	// HTML 側のエリアを開く
	// *********************************************************
	private function HtmlSpace():void {

		log("rollOver" );
		ExternalInterface.call(	"openMyDate" );

	}

	// *********************************************************
	// カレンダーが表示していない時に、HTML 側のエリアを閉じる
	// *********************************************************
	private function HtmlSpaceEndNoAction():void {

		if ( !dateField.dropdown.visible ) {
			log("rollOut" );
			dateField.close();
			ExternalInterface.call(	"closeMyDate" );
		}

	}

>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<mx:DateField
	x = "-70" y="2"
	id="dateField"
	yearNavigationEnabled="true"
	formatString="YYYY/MM/DD"
	change="dateChanged(DateField(event.target).selectedDate)"
	rollOver="HtmlSpace()"
	rollOut="HtmlSpaceEndNoAction()"

	dayNames="['日','月','火','水','木','金','土']"
	monthNames="[
		'１月','２月','３月','４月','５月',
		'６月','７月','８月','９月','１０月',
		'１１月','１２月'
	]"
/>

</s:Application>

プライバシーポリシー