[Any+Timeライブラリ] テキストフィールドをクリックしたらポップアップで時間を選択できるようにする
説明
テキストフィールドをクリックしたらポップアップで時間を選択できるようにするにはnew ATWidget()を使います。最初のパラメータに時間を設定したいテキストフィールドのID名を指定します。2番目のパラメータにはオプションを指定します。時間はformatにフォーマット文字列を指定します。24時間制の場合は%H、12時間制の場合は%hを指定します。分は%iを指定します。
ポップアップのタイトルに表示されるラベルはlabelTitle、時間のラベルはlabelHour、分のラベルはlabelMinuteで指定します。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/anytime.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/anytime.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>日付、時間選択 (Any+Time)</h1>
<form method="get">
<input type="text" id="aTime" size="20" value="2:15">
</form>
</body>
</html>
【sample.js】
Event.observe(window, "load", function(){
new ATWidget( "aTime", {
format: "%H:%i",
labelTitle: "時間",
labelHour: "時",
labelMinute: "分"
} );
});