script.aculo.usベースの日付選択javascript「DatePicker」

フォームで日付を選択する際にポップアップでカレンダーを表示することで訪問者のユーザビリティを向上できます。
DatePicker using Prototype and Scriptaculousでは、script.aculo.usベースで実現しています。

使用方法
DatePicker using Prototype and Scriptaculousからdatepicker.js、datepicker.cssをダウンロードします。
さらにscriptaculous.jsの1.7.0をダウンロードします。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/scriptaculous.js" type="text/javascript"></script>
<script src="http://yourdomain/datepicker.js" type="text/javascript"></script>
全てを上記のようにheadに突っ込み最後に下記のようにHTMLを記入すれば完成です。
<form>
<input type="text" id="date-from" name="date-from">
</form>
<script type="text/javascript">
/*<[CDATA[*/
var dpck = new DatePicker({
relative : 'date-from',
language : 'en'
});
/*]]>*/
</script>
script.aculo.usベースの日付選択javascript「DatePicker」サンプル

2007年11月12日

前の記事：タグを簡単にフォームに挿入するjavascript「jTagging」
次の記事：シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」

関連記事

• [prototype]DateChooser
• パスワード強度を視覚的に明示するjavascript「Password Strength」
• 星形投票システムを実現するjavascript「StarBox 」
• プロキシーライクなゲームを作成するjavascript「Blocks.js」
• 画像ギャラリーの定番javascript「LightBox」

• ファイルサイズを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」