前
の記事
Googleカレンダーで日付入力の際に出てくるポップアップミニカレンダーの作り方(CSS編)
次の記事
Ethnaのソースコードを読み解く 第３回 Ethna_Controller::main
DQNEO Calendar
は、Googleカレンダー風の日付入力ツールです。JKL CalendarをGoogleカレンダー風にアレンジしたものです。
JavaScriptが分らない人でも導入できるように、設置方法を簡単にしました。
誰でも簡単に設置できると思います。
デモ
←クリック(ここにカレンダーが表示されます。)
ダウンロード
dqneo-calendar-0.1.js （右クリックで保存できます。）設置方法
１．HTMLファイルの<head>～</head>タグ内で次のように書きます。
<script src="dqneo-calendar-0.1.js" charset="utf-8"></script>
<script>
var cal1 = new DQNEO.Calendar("cal1");
</script>
<span>
<input type="text" id="cal1"
onclick="cal1.onclick();" onchange="cal1.onchange();"><br/>
</span>
注２：<br/>タグ、<span>タグなどは必須ではありませんが、これがないと表示が崩れることがあります。
（次期バージョンで改良予定）
１画面に複数のカレンダーを表示したい場合
１画面に複数表示することも簡単にできます。| ～ |
下記のように記述します。
<script>
var cal1 = new DQNEO.Calendar("cal1");
var cal2 = new DQNEO.Calendar("cal2");
</script>
<table><tr>
<td>
<input type="text" id="cal1"
onclick="cal1.onclick();" onchange="cal1.onchange();"> ～
</td>
<td>
<input type="text" id="cal2"
onclick="cal2.onclick();" onchange="cal2.onchange();">
</td>
</tr></table>
設置例
デモページ をご覧ください。補足
JKL Calendarにある半透明化やフェードアウトの機能はありません。基本的に、JKL Calendarから機能を削ってより簡単にしています。
謝辞
JKL Calendarという素晴らしいツールを作られた川崎様に感謝いたします。
カテゴリ
JavaScript
トラックバック(0)
このブログ記事を参照しているブログ一覧: [JavaScript]超シンプルなポップアップカレンダー DQNEO Calendar
このブログ記事に対するトラックバックURL: http://dqn.sakusakutto.jp/mt/mt-tb.cgi/294
コメントする