jQuery UI Datepicker
今回は、jQuery UIのDatepickerについて書きます。
Datepickerは、日付の入力を便利にするものです。
このように書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery ui</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <input type="text" id="datepicker"> <script> $(function(){ $('#datepicker').datepicker(); }); </script> </body> </html>
実行結果↓
テキストフィールドをクリックすると、上の写真のようなカレンダーが出てきます。
そして、日付を選ぶと、このように入力されます↓↓
「.datepicker();」と書けば、実装できます。
$('#datepicker').datepicker();
Datepickerには、他にもたくさんの機能があります。
ここからは、いくつかを紹介します。
①
アニメーションをつけることもできます。
$('#datepicker').datepicker({ showAnim: 'bounce' });
上のようにすると、バウンドしながら、表示されます。
アニメーションには、他にも種類があります。詳しくは、こちらを見てください。
②
日付の表示方法も変更できます。
$('#datepicker').datepicker({ dateFormat:"yy-mm-dd" });
デフォルトでは、「02/12/2014」ですが、上のようにすると、「2014-02-04」となります。
③
日付を選択できる範囲を限定することも可能です。
$('#datepicker').datepicker({ minDate:-2, maxDate: "+1M" });
「minDate」は現在より何日前まで選択できるかの設定です。
「maxDate」は現在より何日後まで選択できるかの設定です。
以上で、終わりです。他にも、まだありますので、興味がある方は、調べてみてください。
参考サイト
Datepicker | jQuery UI