jQueryのプラグインで日付の入力が出来るDatepickerが有名ですが、これは日付のみ入力インターフェイスで、時間までは対応していません。
そこでインターネットで色々調べた結果このDatepickerにadd-onという形で日時の入力ができる「datetimepicker」というjQueryプラグインがあったので、その使い方とインストール方法をメモとして記載したいと思います。
目次
- 前提条件
- インストール
- 使い方
- 参考文献
前提条件
- jQuery 1.8.3
- jQuery UI 1.9.2
- 検証済みブラウザ Firefox 22.0
インストール
- 開発者のページより一式ダウンロードします
- ダウンロードしたら任意のフォルダに設置します。
- 以下のようにパスを通し、i18nというフォルダから「jquery-ui-timepicker-ja.js」のパスを通し、日本語対応を実施します。
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> <script src="jquery-ui-timepicker-addon.js"></script> <script src="jquery-ui-timepicker-ja.js"></script> <script src="jquery-ui-sliderAccess.js"></script>
使い方
通常のjQueryのプラグインと同様に要素.datetimepicker(オプション);というふうに使います。
例として基本的なサンプルとその結果を記載します。
<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script src="jquery-ui-timepicker-addon.js"></script>
<script src="jquery-ui-timepicker-ja.js"></script>
<script src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript">
$(function() {
$("#hoge").datetimepicker();
});
</script>
</head>
<body>
<input type="text" id="hoge">
</body>
</html>
この結果は、以下のようになります。
|
| datetimepicker実施画面 |
色々他にもオプションでFromToのようなレンジ指定や3ヶ月間表示など出来ることは沢山あるので色々試してみたいと思います。
参考文献
- http://trentrichardson.com/examples/timepicker/
0 コメント:
コメントを投稿