skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryベースの日付選択javascript「jQueryDatePicker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームなどで日付を入力してもらうときなどに、日付を視覚的に確認できると利用者にとって便利です。
また入力ミスが減るなどの利点があります。
kelvinluck.comのjQueryDatePickerを使用すると、日付選択が可能なフォームを作成することが出来ます。

使用方法
＊開始日を指定すると終了時を指定する際に、それ以前の日にちが選択できない方法。
jquery.js、date.js、jquery.dimensions.js、jquery.datePicker.js、datePicker.cssをダウンロードし、以下の様にheadに挿入します。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/date.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.dimensions.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.datePicker.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://yourdomain/datePicker.css" type="text/css">
<script type="text/javascript">
$(function()
{
$('inputのclass名').datePicker()
$('開始日時のinput id').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
$('終了日時のinput id').dpSetStartDate(d.addDays(1).asString());
}
}
);
$('終了日時のinput id').bind(
'dpClosed',
function(e, selectedDates)
{
var d = selectedDates[0];
if (d) {
$('開始日時のinput id').dpSetEndDate(d.addDays(-1).asString());
}
}
);
});
</script>
またCSSにこれらを加えます。
input.dp-applied {
width: 140px;
float: left;
}
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
あとはフォームに上記で指定したclassやidを付与します。
<label for="start">開始日</label>
<input name="start" id="開始日時のinput id" class="inputのclass名">
<label for="end">終了日</label>
<input name="end" id="終了日のinput id" class="inputのclass名">
jQueryベースの日付選択javascript「jQueryDatePicker」サンプル

記事作成：2007年09月08日

前の記事：スクロールさせるjavascript「iscroll」
次の記事：Dockメニューを実現するjavascript「iconDock」