前回の記事では、
「jQuery ui Datepicker」の設定方法について投稿しました。
https://deep-blog.jp/engineer/3950/
で、
今回はオプションについても少しまとめておきます。
といっても、
良く使用するものだけにはなりますが。
例えば、
テキストボックスだけではなく、
ボタンをクリックしてデートピッカーを立ち上がるようにしたい場合があります。
その場合には、
$("#datepicker").datepicker("option", "showOn", "both");
を追加します。
ソースは以下の様になります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Datepicker</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/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(); $("#datepicker").datepicker("option", "showOn", "both"); }); </script> </head> <body> <h1>jQuery Datepicker</h1> <input type="text" name="demo" value="" id="datepicker"> </body> </html>
※「both」を「button」に変更すれば、ボタンをクリックした場合にのみピッカーが立ち上がるようになります。
ただ、
これだとシンプルな味のないボタンになってしまうので、
ボタンを独自の画像に変更する為に、
<script> $(function(){ $("#datepicker").datepicker(); $("#datepicker").datepicker("option", "showOn", "both"); $("#datepicker").datepicker("option", "buttonImageOnly", true); $("#datepicker").datepicker("option", "buttonImage", "img/icon.png"); }); </script>
とします。
※アイコンの保存場所や名前は任意です。
見た目はこんな感じになります↓↓
あと、
日付の形式も変更したいと思います。
デフォルトだと「mm/dd/yy」という形式になっているので、
これを、例えば「yy.mm.dd」に変更する場合には、
$("#datepicker").datepicker("option", {dateFormat:"yy.mm.dd"});
を追加するだけです。
そうすると、
例えば、
今日であれば「2016.02.05」という日付がテキストボックスに入ると思います。
この記事へのコメントはありません。