Widget カレンダー (Date Picker)

 Dojoには、いくつかのWidget(ウィジェット)が用意されています。カレンダーを表示するウィジェットも用意されています。カレンダーは、以下のようにしてウィジェット名を指定すると自動的に作成されます。(実際のサンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>dojoサンプル</title>
<script src="dojo.js" type="text/javascript"></script>
<script type="text/javascript"><!--
dojo.require("dojo.widget.html.DatePicker");
// --></script>
</head>
<body>
<h1>dojoサンプル</h1>
<div dojoType="datepicker"></div>
</body>
</html>

 カレンダーが表示されれば成功です。カレンダーはいろいろな設定や日付の取得ができますが、以下のようにtodayを使えば今日の日付を取得することができます。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>dojoサンプル</title>
<script src="dojo.js" type="text/javascript"></script>
<script type="text/javascript"><!--
dojo.require("dojo.widget.html.DatePicker");
function checkDate()
{
datePicker = dojo.widget.fromScript("datepicker", {}, dojo.byId("datePickerNode"));
document.getElementById("result").innerHTML = datePicker.today;
}
// --></script>
</head>
<body>
<h1>dojoサンプル</h1>
<div dojoType="datepicker"></div>
<form>
<input type="button" value="日付チェック" onClick="checkDate()">
</form>
<div id="result"></div>
</body>
</html>

 これ以外にも、いくつかのプロパティとメソッドが用意されています。詳しくは以下のページを参照してください。

http://manual.dojotoolkit.org/widget/DatePicker.html

[目次へ]

(2006.3.29)