SQLの窓

2014年11月11日


Google Chrome の type="date" で表示される datepicker の最も使いどころは、フレームをまたいで表示されるところです



上の画像は、IFRAME ですが、IFRAME 内部にあるコントロールを開いて、親の境界を超えて表示されます。これはコンボボックスでも当然の事ですが、昔は Windows のコントロールを ActiveX として IE に実装して、イントラネットでのみ使う理由もここにありました。

今では使われなくなりましたが、FRAME の境界も超えてくれます。
▼ 以下は IFRAMEで表示しています。(Google Chrome でのみテスト可能)
データフォーマットは yyyy-mm-dd

JavaScript や HTML 側で扱う『値』としてのフォーマットでは -(ハイフン) が使われます。また、月も 日も二桁で表現する必要があります( 9 では なく 09 )

日付のチェックはされますが、結果が空になります

数字のみしか入力できませんが、入力時に 2014/11/31 というような、正しく無い日付を選択できます。但し、その場合値を取得すると空文字列となります。

本当の未入力との区別

未入力の場合も当然 value は "" として返って来るので、JavaScrpt で、validity.badInput をチェックします。間違った日付の場合はこの値が true となり、通常の未入力では false となります。
<script>
function setStatus() {
	document.getElementById("getvalue").value = document.getElementById("dt").value;
	document.getElementById("geterror").value = document.getElementById("dt").validity.badInput;
}
</script>
<form 
	action="http://winofsql.jp/php_get.php" 
	target="iframe_result">
日付エラーのテスト
<input 
	id="dt" 
	type="date" 
	name="mydate" 
	size="15" 
	value="2014-11-30" 
	onchange='setStatus()'>
<br>

値 
<input 
	type="text" 
	id="getvalue">
<br>
エラー状態(validity.badInput) 
<input 
	type="text" 
	id="geterror">
<br>
<input 
	type="button" 
	value="ステータス更新" 
	onclick='setStatus()'>
<br>
<input 
	type="submit" 
	value="送信">
</form>

<br>
<iframe 
	style='width:400px;height:100px;' 
	name="iframe_result"></iframe>



posted by lightbox at 2014-11-11 22:28 | HTML5 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり