jQuery flatpickrの各日付　オンオフ判定

jQueryのflatpickrを使ってカレンダーを作成しています。

カレンダーの日付をクリックした際に、その日付が「選択」されたのか「選択取り消し」されたのかを知りたいです。
flatpickrのEventに onChange(selectedDates, dateStr, instance)があったので、その引数である (instance.selectedDateElem)をみて、classListに"selected"があるかどうかで判定をしようと思ったのですが、「選択」「選択取り消し」共に "selected"が付いてしまっているため、判定ができませんでした。

どのようにすれば判定ができるかご存知の方がいましたら教えていただきたいです！

「jQueyr - flatpickr　ドキュメント」
英語
 日本語

「環境」
Google Chrome バージョン: 69.0.3497.100（Official Build）（64 ビット）

「実際に書いたコード①」

javascript
1const config = {
2  altInput: true,
3  altFormat: "d",
4  locale: "ja",
5  dateFormat: "Y/m/d",
6  mode: "multiple",
7  inline: true,
8  shorthandCurrentMonth: true,
9  altInputClass: "hidden-altInput",
10  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
11  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
12  onChange: function (selectedDates, dateStr, instance) {
13    console.log(instance.selectedDateElem.classList);
14 } ...

「実際に書いたコード②」

javascript
1const config = {
2  altInput: true,
3  altFormat: "d",
4  locale: "ja",
5  dateFormat: "Y/m/d",
6  mode: "multiple",
7  inline: true,
8  shorthandCurrentMonth: true,
9  altInputClass: "hidden-altInput",
10  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
11  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
12  onChange: function (selectedDates, dateStr, instance) {
13    console.log(this.selectedDateElem.classList);
14 } ...

x_x

2018/11/06 07:30

flatpickrというのはこれでしょうか？　https://flatpickr.js.org/

m.ts10806

2018/11/06 07:31

実際に試された（できなかった）コードをご提示ください。できれば現象確認したブラウザの種類とバージョンも。

van-0215

2018/11/06 07:37

x_x様　おっしゃる通りです。https://tr.you84815.space/flatpickr/eventsAndHooks.html　こちらが日本語版になります。

m.ts10806

2018/11/06 07:39

質問は編集できるので適宜ご対応ください。

x_x

2018/11/06 07:40

「選択取り消し」というのはどういう動作ですか？　カレンダーを開いてそのまま閉じた場合onChangeが走らないようなので。

van-0215

2018/11/06 07:45

x_x様　カレンダーの日付をクリックしたら、色がつきます。これを「選択」と呼んでいます。　同じ日付をもう一度クリックしたら、色が消えます。これを「選択取り消し」と呼んでいます。

行動規範の内容に同意します

回答1件

もっといい方法があるかもしれませんが、前回の選択個数を保持しておけば差でわかるかと。

JavaScript
1let selectedDatesLength = 0;

JavaScript
1  onChange: function (selectedDates, dateStr, instance) {
2    console.log(selectedDates.length - selectedDatesLength);
3    selectedDatesLength = selectedDates.length;
4  }

選択個数が0個になったときになぜかonChangeが2回走るようなので注意

-- 確認用

HTML
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset="UTF-8" />
5  <title>flatpickr</title>
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/flatpickr.min.css" />
7 </head>
8 <body>
9<input class="flatpickr" />
10<!--script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script-->
11<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/flatpickr.min.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/l10n/ja.js"></script>
13<script>
14const nextYear = '2019';
15const nextMonth = '11';
16const nextDay = '10';
17let selectedDatesLength = 0;
18const config = {
19  altInput: true,
20  altFormat: "d",
21  locale: "ja",
22  dateFormat: "Y/m/d",
23  mode: "multiple",
24  inline: true,
25  shorthandCurrentMonth: true,
26  altInputClass: "hidden-altInput",
27  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
28  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
29  onChange: function (selectedDates, dateStr, instance) {
30    console.log(selectedDates.length - selectedDatesLength);
31    selectedDatesLength = selectedDates.length;
32  }
33};
34flatpickr('.flatpickr', config);
35</script>
36 </body>
37</html>