今日は超絶便利な、入力ホームでカレンダーを利用するスクリプト「datepicker」について、特定の日を選択させない方法を紹介します。
Datepicker | jQuery UI

Datepickerとは

「Datepicker」はカレンダーからマウスで簡単に日付を入力できる機能を実装できる便利なjQueryスクリプト、

マウスだけで操作できる、カレンダーなので直感的で分かりやすい、また入力される日付の形式を統一できるという利点があります。
さらに、今回紹介する選択できない日を設定することで、あらかじめ入力制限をすることができます。
クライアントからはこの手の入力方法を要望される場合も多いので、「Datepicker」と今回の内容についてはぜひ知っておきましょう。

Datepickerの設置

こんなに便利な「Datepicker」ですが、設置の方法は非常にカンタン。
そのままソースコードを転載すると

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
 
</body>
</html>

こんな感じ。
詳しくは説明しませんが、

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

この辺で、必要なスクリプトを読み込み、

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

上記のようにしてDatepickerを処理させます。
対象となるフォームは以下のように書きます。

<p>Date: <input type="text" id="datepicker"></p>

理解しておきたいのは、入力フォームに対応させる方法で、
今回はID属性を使って連携させていますね。

id=”datepicker”　と　”#datepicker”
としている部分です。
ここを変更することにより、複数設置することも可能です。　

特定日の入力をできなくさせる

日付を入力させるというのはどんな時があるでしょうか。
例えば、予約の日程を入れてもらうとか、無料相談の日付を入れてもらうとかそういった場合にもカレンダーは使えますよね。
ただ、そんな時に例えば定休日の日等は指定されたくはありません。
なので、特定の日についてはカレンダーで選択できないようにできると便利です。

選択できる日程の制限は、「Datepicker」のサンプルでは
「Restrict date range」
として期限を区切って入力させるサンプルコードが公開されていますが、
特定日を指定して選択不可にする方法は書かれていなかったので紹介します。

とりあえずは、ソースコードのサンプルを紹介しますね。

<script type="text/javascript">
$(function(){
	var dateFormat = 'yy-mm-dd';
	var hilidays = [
		'2020-05-04',
		'2020-05-05',
		'2020-05-05',
		'2020-05-12',
		'2020-05-19',
		'2020-05-26',
		'2020-06-02',
		'2020-06-09',
		'2020-06-16',
		'2020-06-23',
		'2020-06-30'
	];
	var option = {
		beforeShowDay : function(date) {
							var current = $.datepicker.formatDate(dateFormat, date);
							return [( hilidays.indexOf(current) == -1 ), "", ""];
						}
		}
	$("#datepicker").datepicker(option);
});
</script>

こんな感じです。
重要なのは「beforeShowDay」というオプション。
これは日付のそれぞれが表示される直前に呼び出される部分で、ここで返した配列に従ってカレンダーの日付の処理を変更できます。

beforeShowDay

わからなければ、上記のサンプルコードをそのまま使ってもらえればいいのですが、
リファレンスにもある内容を簡単に説明すると、「beforeShowDay」に以下のようなルールで配列を渡します。

[0]：true/falseでその日付をアクティブ/非アクティブに設定できる
[1]：該当の日付にクラスを設定できる。　→　これを利用すれば、CSSやスクリプトで操作できるようになる
[2]：日付のツールチップのテキスト設定ができる

ざっくりこんな感じです。
今回は、この中の１番目にある、日付選択の不可設定をプログラムを使って行っています。

大きく2段階で設定してるんですが

非アクティブにしたい日付の一覧を配列として用意
今から表示しようとしている日付が非アクティブのリストに入っていたら、falseを返す（＝非アクティブにする）

こんな感じですね。
そのままコピって使ってもらえればいいですが、

function(date) {
	var current = $.datepicker.formatDate(dateFormat, date);
	return [( hilidays.indexOf(current) == -1 ), "", ""];
}

ここでは何やってるかというと

date という配列に今から表示しようとしている日付が入っているので
formatDate で配列内の日付と表記の形式を合わせて
indexOf で配列内にその日付が含まれていなければ true 含まれていれば false

という感じです。
一度使えば、その後は何度でも使い回せます。

入力されたくない日付が入力できてしまうのは問題です。
お客さんからの要望に対してできませんとはなかなか言えない仕様なので、ぜひ使えるようにしておきましょう。

運営しているサイトを今昔物語。
ビジネスモデルは全くなく、ほとんど趣味の範囲でお金は一切出てませんが、コツコツとサービスを運用しています。
予約毎日1000人以上の人に見てもらえるようになり、写真の登録なども増えてきて軌道に乗りつつあります。
古写真に興味ある方はぜひどうぞ
昔の写真のあの場所は今どうなっている？昔と今を比較する写真ギャラリー「今昔写語」

[RelService] [Service]