【jQuery】Datepickerの使い方 |

投稿日 : 2019年3月24日

【jQuery】Datepickerの使い方

JavaScript|jQuery|プログラミング

こんにちは、yutaです。

今回は、jQuery系のjQuery UI(jQuery User Interface)で提供されているDatepickerの基本的な使い方を紹介します。

jQueryって何？という方の為に簡単に説明すると、Javascriptで便利な機能が簡単に利用できるようになるライブラリの事です。

jQueryにはいくつか種類があり・・・

・jQuery
・jQuery UI
・jQuery Mobile
・Sizzle
・QUnit

があります。僕は、jQueryとjQuery UIしかまだ触っていません。

jQueryを使うと、例えば今回説明するDatepickerでは簡単にカレンダーから日付を入力する機能をwebページ上に実装することができます。

では、早速始めましょう！

1.GoogleからjQueryを利用するのに必要なcssとjsのURLをコピー
 2.inputタグとDatepickerの初期化処理の記述
 3.Datepickerのデザインの変更方法

1.GoogleからjQueryを利用するのに必要なcssとjsのURLをコピー

jQueryを利用するには、jQuery本体をダウンロードして読み込むか、Googleで提供されているURLを使ってjQueryを読み込む必要があります。

今回は、GoogleからURLをコピーして使うことにします。こちらの方が楽なので。

Googleのライブラリ提供ページに飛ぶと、jQueryと書いてある部分があるので、そこにある最新のURLをコピーします。

3.x.snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

みたいなのがあるので、この<script>から</script>までをコピーしてください。

そして、htmlファイルのbodyの中に貼り付けます。

ライブラリ提供ページにjQuery UIのURLもあります。cssとjsのURLが載っていると思うので、先ほどと同じ様にjsのURLをコピーして、bodyの中に貼り付けます。

※注意点としては、jQueryのURLを貼り付けたところより下の行に、jQuery UIのURLを貼り付けてください。

そして、cssはheadの中に貼り付けます。

ここまでやるとhtmlは以下の様になりますね。

2.inputタグとDatepickerの初期化処理の記述

これで、Datepickerを使う準備ができたのでこれから実装していきます。

まず、bodyにinputタグを記述します。Datepickerで選択した日付を入力するエリアです。

<!– 入力エリアを作成 idは好きな名前でOK –>
<input type=”text” id=”calendar”>

次に、Datepickerの初期化処理を記述します。コピペでOKです。

<!– Datepickerの初期化処理 ※#calendarはinputタグに付けたid名 –>
<!– 初期化処理はjsファイルの読み込み以降に記述してください。そうしないと動きません。 –>
<script>
$( function() {
$( “#calendar” ).datepicker();
} );
</script>

これでもうDatepickerの実装完了です。簡単！

実装後のhtmlは以下です。

htmlをブラウザで開いて、入力欄をクリックすると↓画像の通り、カレンダーが表示され、日付を選ぶと入力されます。