AMG Solution

jQueryライブラリを使用して、簡単に日付選択用ダイアログを作成

こんにちは、樋口です。
 
今回は、ライブラリを読み込むだけで簡単に日付選択用ダイアログを表示することができるjQuery UI Datepickerについてご紹介します。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
BootStrap
3.2.0
jQuery UI Datepicker
1.12.1

ライブラリの入手

jQuery UIは下記サイトよりダウンロードできます。
jQuery UIダウンロード
 
上記リンクのホームページより、「Download」ボタンからZIPファイルをダウンロードします。ZIPファイルダウンロード後、jquery-ui-1.12.1.customフォルダの中にある、「jquery-ui.js」と「jquery-ui.css」を自身のプロジェクトに持ってきます。
 
これで準備は完了です。

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。
 

 root
  |- index.html
  |- js
   |- test.js
   |- jquery.js
   |- jquery-ui.js
  |- css
   |- bootstrap.css
   |- jquery-ui.css

HTMLファイル

初めに、HTMLファイルを作成します。
 
– index.html

9~10行目:
jQuery UI Datepickerで使用するCSSを読み込みます。
 
25行目:
日付選択用ダイアログを表示する為のエリアを表示します。
 
32~34行目:
jQuery UI Datepickerで使用するjavaScriptを読み込みます。
 
以上で、HTMLは完成です。次に、javaScriptについて説明します。

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。
 
– test.js

2行目:
jQuery UI Datepickerを有効にするため、「datepicker」を宣言します。
 
3行目:
日付選択時の表示フォーマットを設定します。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に日付選択用ダイアログを使うことができます。公式ページにさらに詳しいオプションの説明ございますので、興味がある方はぜひ試してみてください。
 
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING