先日フォームの作成依頼があった際に、
日付欄はユーザーに直接入力させるのではなく、datepickerで選択出来るようにしたいと
お客様から要望がありました。
ということで、
久しぶりに
jQuery ui Datepicker
を使うことに!!
設置方法は簡単です!!
コンテンツ
jQuery ui Datepickerの設定方法
まず、<head>~</head>の間に、
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
の3行を追記して、CSSとjQueryのコードを読み込んでやります。
さらに、
<script> $(function(){ $("#datepicker").datepicker(); }); </script>
を<head>~</head>の間の適当な場所に追記します。
あとは、
該当のテキストボックスに「id="datepicker"」を追記するだけです。
まとめるとこんなソースになります↓↓
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Datepicker</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function(){ $("#datepicker").datepicker(); }); </script> </head> <body> <h1>jQuery Datepicker</h1> <input type="text" name="demo" id="datepicker"> </body> </html>
これだけで動作するので、
非常にシンプルで便利ですね!!
テキストボックスをクリックすると以下の様な感じでdatepickerが立ちあがります。
テーマ(デザインカラー)の変更
テーマも複数用意されているので、
好みやサイトに合わせたデザインカラーに変更することも出来ます。
http://jqueryui.com/themeroller/
例えば、「UI lightness」というテーマを使いたい場合には、
読み込むCSSを
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
に変更すればいいだけです。
見た目はこのようになります↓↓
この記事へのコメントはありません。