システム開発おぼえがき: 日付入力用のjQueryプラグイン「Datepicker」

posted on 2012/07/21 in JavaScript

いまさら感もありますが、日付入力するときの定番プラグイン「Datepicker」の紹介です。

http://jqueryui.com/home
jQuery UIをダウンロードします。

※スライドバーなど、いろいろなユーザーインターフェース改善ライブラリが含まれています。分かる方はDatepicker関連だけをダウンロードすることも可。

解凍したフォルダを適当にリネームして（私はuiとしました）アップロード。

上の画像のような、シンプルなもののソースは以下。

<html lang="ja">
<head>
<title>jQuery DatePicker</title>
<meta charset="UTF-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="development-bundle/ui/i18n/jquery.ui.datepicker-ja.js"></script>
<script>
 <!--
 jQuery( function() {
    jQuery( '.datepicker' ) . datepicker();
 } );
 // -->
 </script>
</head>
<body>
<h1>jQuery DatePickerプラグインのテスト</h1>
日付：<input type="text" name="mydate" id="mydate" class="datepicker" />
</body>
</html>

年・月・日のフィールドを分けることもできます。
こちらのソースを参考に。
http://demo.svps.blab7.net/ui/datepicker2.html