Dojoで日付入力フィールドを追加する方法はとても簡単です。
日付入力サンプル
試しに上のリンク先をクリックしてみて下さい。
こんなに複雑なカレンダー選択表示も、Dojoを利用すれば以下のステップで簡単に追加することができます。
- 1. HTMLのヘッダ部でDojoの基本ライブラリを読み込む。
次の１行を<head>タグ内に追加します。
<script type="text/javascript" src="[lib-root]/dojo/dojo.js" djconfig="parseOnLoad: true"></script> - 2. タグでDojoでいくつか定義してあるテーマのうち、好きなテーマのスタイルシートを読み込む。
'soria'というテーマを選択する場合は以下の行のように指定する。
@import "[lib-root]/dijit/themes/soria/soria.css";
・・・といっても、今の所まともに利用出来るのは、'soria'と'tundra'ぐらいです。
'tundra'はタブ等の表示があか抜けない感じがするので、個人的には'soria'がお勧めです。もちろん根性と勇気があればテーマを自作する事も可能です。
また、bodyタグのclass指定で'soria'を指定しておきます。 - 3. <script>タグ内でdojo.require()を使用して、利用するライブラリを読み込む。
日付入力用フィールドは"dijit.form.DateTextBox"を利用します。
dojo.require("dijit.form.DateTextBox"); - 4. これだけです！
これらのステップを踏んだHTMLソースは以下のようになります。
<html>ここで、[lib-root]はDojoのライブラリをインストールしたディレクトリになります。
<head>
<meta equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Dojo Example</title>
<style type="text/css">
@import "[lib-root]/dijit/themes/soria/soria.css";
</style>
<script type="text/javascript" src="[lib-root]/dojo/dojo.js"
djconfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="soria">
日付入力サンプル：
<input length="10" dojotype="dijit.form.DateTextBox" type="text" />
</body>
</html>
どうです？Dojoしてみたくなりませんか？
