[Any+Timeライブラリ] テキストフィールドをクリックしたらポップアップで日付を選択できるようにする
説明
テキストフィールドをクリックしたらポップアップで日付を選択できるようにするにはnew ATWidget()を使います。最初のパラメータに日付を設定したいテキストフィールドのID名を指定します。2番目のパラメータにはオプションを指定します。時間はformatにフォーマット文字列を指定します。西暦年4桁の場合は%Y、月は%c、日にちは%eを使います。テキストフィールドに他の文字が含まれる場合は、このformatで指定された文字列に従います。
ポップアップ全体のタイトルに表示されるラベルはlabelTitle、年のラベルはlabelYear、月のラベルはlabelMonthで指定します。
サンプルプログラム
【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="aDate" size="20" value="2009/12/4">
</form>
</body>
</html>
【sample.js】
Event.observe(window, "load", function(){
new ATWidget( "aDate", {
format: "%Y/%c/%e",
labelTitle: "日付",
labelYear: "月",
labelMonth: "日"
} );
});