jQueryベースのカレンダー作成javascript「jCalendar」

フォームなどでは日付を指定させることが多く、利便性が求められます。
jCalendarはjQueryベースでカレンダーを作成するjavascriptで、利用者のユーザビリティーを向上させることができます。

使用方法
jCalendarからjcalendar.js、jcalendar.cssをjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jcalendar.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/jcalendar.css" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$('#id名').jcalendar();
});
</script>
上記の様にjavascriptを記述します。
さらにHTMLでは、上で指定した#id内に日、月、年をselectで指定し
<div class="jcalendar-selects"></div>
で囲みます。
長くなるため割愛しますので、jQueryベースのカレンダー作成javascript「jCalendar」サンプルのソースを参考にしてください。

2007年11月19日

前の記事：時間を指定するjavascript「jQuery Time Entry」
次の記事：アップロードファイル複数指定できるjavascript「Multiple File Upload plugin for jQuery」

関連記事

• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• 超クールなカレンダーjavascript「Calendar」
• カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」
• jQueryベースの日付選択javascript「jQueryDatePicker」
• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」