[jQuery] Datepickerの使い方

20151001_img04

フォームで日付をカレンダーから選ばせたいときに便利なのがjQuery UIのDatepicker。以下のように実装するだけで使えます。

ヘッダーで以下を読み込みます

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >

id属性、class属性どちらでも設置できます。

$(function() {
  $(".datepicker").datepicker();
});

HTMLの例

<p><input type="text" class="datepicker"></p>

できること

  • jQuery UIのテーマを変更することで見た目を変えることができる。
  • 表示形式を変更できる。(ex:月、曜日など)

参考サイト