先日フォームの作成依頼があった際に、
日付欄はユーザーに直接入力させるのではなく、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">
に変更すればいいだけです。
見た目はこのようになります↓↓
この記事へのコメントはありません。