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

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

使用方法
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」サンプル

sponsors

「script.aculo.usベースの日付選択javascript「DatePicker」」をシェアする

記事作成:
記事URL:

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