前提

Datepicker.jsの導入方法や基本的な機能のカスタマイズについては、公式ドキュメントや日本語リファレンスを参照してください。
また、日付計算にはDay.jsを使用します。

• Datepicker Widget | jQuery UI 1.10 Documentation
• Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO
• Day.js

以下の準備ができている状態で解説します。

• Datepicker.jsとデフォルトCSSの読み込み
• Datepicker.jsの日本語化
• Day.jsの読み込み

選択可能期間の指定

予約システムでは、過去の日付や遠すぎる未来の日付は選択不可にすることが一般的です。選択可能な日付の範囲を指定する際には、minDateとmaxDateオプションを使用します。minDateには日付の最小値、maxDateには最大値を指定します。
以下では、現在日付を基準に1年後までの日付を選択可能にしています。

開始日と終了日の連動設定

次は宿泊予約などでよくある、期間の開始日と終了日を連動させるカレンダーの実装方法を紹介します。

初期設定

開始日と終了日の入力欄を用意し、それぞれに共通する設定はsetDefaults()にまとめます。$.datepicker.setDefaults( settings )は全てのDatepickerの初期設定を行うことができます。

終了日に開始日より前の日付を選択できないようにする

このままだと開始日より前の日付を終了日で選択できてしまうので、オプションで設定を変更します。onSelectオプションには、カレンダーで日付が選択された時に呼び出したい関数を指定できます。関数の第一引数には、カレンダーで選択された日付がYYYY/MM/DD形式の文字列として渡されます。この関数内で開始日に選択された日付を終了日のminDateオプションに設定することで、終了日は開始日より前の日付が選択できなくなります。

※このコードでは開始日に終了日より未来の日付を選択した場合、終了日は開始日と同じ日にリセットされます。

開始日の選択で終了日を自動設定

ユーザーが指定する期間が予想できる場合、開始日の選択で終了日を自動で設定したい時があると思います。onSelectオプションの関数の中で、開始日の日付をもとに設定したい日付を計算し、終了日の入力欄に値としてセットします。
以下では、開始日を選択すると終了日を開始日の翌日に設定します。
（ただし開始日に現在日付の1年後を選択した場合、終了日は開始日と同日を設定）

まとめ

本記事では、Datepicker.jsを使った期間指定や開始日と終了日の連動設定を解説しました。
簡単にカスタマイズして様々なカレンダーを実装できるライブラリなので、jQueryでカレンダー機能を導入する際はぜひおすすめします。
最初に紹介しましたが、日付計算にはDay.jsのメソッドを使用しているので、違うライブラリなどを使用する場合は適宜置き換えてください。
最後までお読みいただきありがとうございました！