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="https://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>

HTML5

IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス

Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )

Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く

Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く

Canvas : 指定サイズ BOX の内側を指定の太さで線を引く

HTML5 : 最も簡単な「required 属性」による未入力チェック

HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか

HTML5 : canvas 要素に画像をロードする