日付入力用のjQueryプラグイン「Datepicker」

いまさら感もありますが、日付入力するときの定番プラグイン「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

  • Spread The Love
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx

0 Response to “日付入力用のjQueryプラグイン「Datepicker」”

Leave a Reply