プログラミングをよく知らない初心者がMultiDatesPikerを導入してみた

#MultiDatesPikerとは？
jQuery UIのカレンダー(DatePiker)を拡張し、複数の日付を選択できたり、範囲の指定ができたりと、multiと名前に付いている通り『複数』に重点を置いたプラグインの一つです。

#使い方
ほぼ公式(？)でわかるとは思いますが、説明していきます。（今回は拡張という事なので以前にdatepickerを使用しているという前提で話を進めていきます）
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

1. 必要なファイルを設置
   置き場所は特に厳格には決まっていないですが、既にあるプロジェクトに合わせるのが良いと思います。プロジェクトのどこかのjsディレクトリとかに
   jquery-ui.js
   jquery.datetimepicker.js
   などが置いてあると思うので同じところにjquery-ui.multidatespicker.jsファイルを設置します。
   自分はこの一つのファイルだけ設置でいけました。

2. 埋め込み
   プロジェクトのHTMLを表示する部分に埋め込む必要があります。

例）年間のカレンダーを表示
HTML

test.html

<div id="mdp-demo"></div>

js

test.js

 	$(function() {
 		var today = new Date();
 		var y = today.getFullYear();
 		$('#calendar').multiDatesPicker({
 			numberOfMonths: [4,3],
 			defaultDate: '1/1/'+y
 		});
 	});

公式のものをそのまま使ったら動かなかったので少し加えました(コピペすみません)
これだけで動きます。

あとは

 		$('#calendar').multiDatesPicker({
 			numberOfMonths: [4,3],
 			defaultDate: '1/1/'+y
 		});

ここの部分にオプションを追加していけば自分好みのカスタマイズが可能となります。
一例を紹介します。

#その他オプション
デフォルトの日付を""で囲まれた日付で設定します。(y-m-d形式で1995年3月13日を指定)

dateFormat: "y-m-d",
defaultDate:"95-3-13"

当月の指定日を選択済みの状態にしておきます。(14日と19日)

addDates: [date.setDate(14), date.setDate(19)]

選択不可の日付を設定します。(1日と3日)

addDisabledDates: [date.setDate(1), date.setDate(3)]

カレンダー自体を無効にします

disabled: true

altFieldを使用します。選択した日付をテキストボックスへ表示させます

altField: '#altField'

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

選択可能な数を指定します。

maxPicks: 2

指定した日数以降の日付を選択不可にします。(選択した日付の後ろ7日以外は選択できなくなります)

pickableRange: 7

指定した範囲を選択済にさせます。
0,5は当日から5日後を表します。-1を設定すると前日となります。

mode: 'daysRange',
autoselectRange: [0,5]

選択できる最小日、最大日を指定します
0は当日、30は30日後を表します。

minDate: 0, 
maxDate: 30

1年間のカレンダーを表示するものもあります。こちらも同様にデフォルト日の指定や選択可能日を指定することもできますし、3ヶ月×4列のような表示の仕方も可能です
その場合はこのようにオプションに追加します。

numberOfMonths: [3,4]

#まとめ
今回はMultiDatesPickerを簡単に説明させていただきました。使い方も非常に簡単なので、ぜひ使ってみてください。特にDatePickerやTimePickerを使ったことがある人は使い方も似ているかと思いますのですぐに使えると思います。
今回、jsに初めて触れたので(ほんとちょっとだけですが)まだまだ勉強不足ですがこれからできる事を増やしていきたいと思います。