HtmlServiceをNATIVEモードにするとHTML5が使えるようなので
**<input type="date">**タグを使ってみた
input type=date
このサイトによるとchrome10以上、operaは10以上から使えるらしい。
とりあえず、index.htmlをNATIVEモードにして出力。
function doGet(){
var html = HtmlService.createTemplateFromFile('index').evaluate();
html.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form onsubmit="alert(this.a.value);return false;">
<input name="a" type="date" value="">
<input type="submit" >
</form>
</body>
</html>
ウェブアプリケーションとして実行すると確かに日付入力が表示されます。
試してみたchromeのバージョンは28.0.1500.72 m
// html.setSandboxMode(HtmlService.SandboxMode.NATIVE);
doGetのこの箇所をコメントアウトすると日付入力にならない。
ちなみに初期値を入力するにはストリングで以下の形式で
- "yyyy-mm-dd"
<input type="date" value="2001-02-01">
以下の書き方はダメらしい
- ｘ "2001/02/01"
- ｘ "2001-2-1"
- ｘ "20010201"
- ｘ "01/02/2001"
required属性についてはNATIVE,非NATIVEどちらでも使えるみたい。（chrome ver28)
<input type="date" value="2001-02-01" required>
空欄のまま「送信」ボタンを押すと
エラーがでます。
ただ、NATIVEモードと非NATIVEモードではcajaがonsubmitを書き換える??らしい。
NATIVEだと入力送信してもalertが出なかった。
cajaはいろんなとこでいろいろとやらかす。。。
ちなみに非NATIVEが上、NATIVEが下に書き換わる。。
<form onsubmit="alert(this.a.value);return false;">
非NATIVE
<form onsubmit="action="http://8b9b4...">
NATIVE
<form onsubmit="try { return ___.plugin_dispatchEvent___(this, event, 0, 0, 1); } finally { return false; }">
###inputをこんどはtype="number"に置き換えて実行。
<input name="a" type="number" value="-1" min="0" required >
このまま送信ボタンを押すともちろんエラーがでます。
空欄にして送信すると
「このフィールドを入力してください。」
数値以外を入力して送信すると
「数字を入力してください。」
とエラーがでました。
+min属性
+max属性
もふつうに使えるようです。
###paternも試してみた
<input name="a" type="text" value="" pattern="^[0-9A-Za-z]+$" required >
type="text"に置き換えて、patternを英数字に限定。
下図のようなエラーがでます。
