フォームでカレンダーから日付入力できるようになる「jQuery ui Datepicker」の導入手順

フォームでカレンダーから日付入力できるようになる「jQuery ui Datepicker」の導入手順

フォームでカレンダーから日付入力できるようになる「jQuery ui Datepicker」の導入手順
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

jQuery ui Datepickerは、フォームでの日付入力時にカレンダーから選択できるようにする、jQuery UIの中にある機能の1つです。jQuery UIには、ユーザーインターフェースに関する機能がまとめられていて、jQuery ui Datepickerはその中のカレンダーの機能です。

今回は、jQuery ui Datepickerを導入して、日付入力フォームでカレンダーを表示する方法をご紹介したいと思います。

簡単なデモも用意しましたので、挙動については以下ページをご参照ください。

デモページを見る

スポンサードリンク

jQuery ui Datepickerの導入手順

「jQuery本体」と「jQuery UI」、「jQuery ui Datepicker」をそれぞれ読み込むために、以下を記述します。記述する場所は、</body>の直前でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

続いて、スタイルを読み込むために、以下を<head>~</head>内に記述します。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

カレンダーのテーマを変更したい場合は、jQuery UIのテーマページにアクセスして、左側の[Gallery]タブから好きなテーマを選びます。

カレンダーのテーマ

使いたいテーマが決まったら、CSSファイルのURLの「redmond」をテーマ名に変更してください。例えば、「Le Frog」というテーマを使いたい場合は、以下のように記述します。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css">

CSSを読み込んだら、次はjQuery ui Datepickerを動かすためのスクリプトを記述します。

<script>
$(function() {
$("#datepicker").datepicker();
});
</script>

jQuery本体等の読み込みよりも後ろに記述してください。

あとは、input要素にIDを追加すれば、フォームでカレンダーを表示できます。

<input type="text" id="datepicker">

カレンダーのアイコンを表示したい場合は、スクリプトを以下のようにします。

<script>
$('#datepicker').datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'ico_calendar.png'
});
</script>

アイコンとして使うico_calendar.pngは準備する必要があります。

showOnの値を’button’に変更すると、アイコンをクリックした時しかカレンダーが表示されなくなります。bothの場合は、アイコンでもフォーム内でも、どちらをクリックした場合もカレンダーが表示されます。

また、buttonImageOnlyの行を削除すると、アイコンがbutton要素で包括されて、アイコンの周りに枠ができます。

あとがき

日付を手入力するよりも、カレンダーから選択した方がわかりやすいと思います。申し込みフォーム等で日付の選択があったら、ぜひ導入を検討してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。