シンプルなカレンダー日付入力プラグイン jquery.simplecalendarjp.js

2011/12/14

日付入力を支援するカレンダーUIです。
redmineのカレンダー機能をそのままjQueryプラグインとして移植しました。

デモ

日付を入力:

ダウンロード

使い方

極めて簡単です。

jsファイルを読み込む
cssファイルを読み込む
カレンダーを呼び出す

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.simplecalendarjp.js" type="text/javascript" charset="utf-8"></script>
<link href="calendar.css" media="screen" rel="stylesheet" type="text/css" />
<script>
$(function(){
  $('#cal').setCalendar();
});
</script>
HTMLは↓こう書きます。(id属性は必須です。)

<input type="text" id="cal" size="15" >

複数設置する

カレンダーを複数設置することもできます。

カレンダー１：
カレンダー２：

<script>
$(function(){
  $('.inputCalendars').setCalendar();
});
</script>

(この場合も、input要素のid属性は必要です。)

カレンダー１：<input type="text" id="cal_1" class="inputCalendars" size="15" > <br />
カレンダー２：<input type="text" id="cal_2" class="inputCalendars" size="15" > <br />

アイコンをつける

setCalendar({src:'url'}); と書けば、入力フォームの横に好きなアイコンを表示できます。
こちらの方がユーザビリティが良いかもしれません。

アイコン付きカレンダー：

<script>
$(function(){
  $('#cal_3').setCalendar({src:'/images/calendar.png'});
});
</script>

カテゴリ: