質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,243

van-0215

score 89

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

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

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

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

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

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

const config = {
  altInput: true,
  altFormat: "d",
  locale: "ja",
  dateFormat: "Y/m/d",
  mode: "multiple",
  inline: true,
  shorthandCurrentMonth: true,
  altInputClass: "hidden-altInput",
  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
  onChange: function (selectedDates, dateStr, instance) {
    console.log(instance.selectedDateElem.classList);
 } ...

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

const config = {
  altInput: true,
  altFormat: "d",
  locale: "ja",
  dateFormat: "Y/m/d",
  mode: "multiple",
  inline: true,
  shorthandCurrentMonth: true,
  altInputClass: "hidden-altInput",
  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
  onChange: function (selectedDates, dateStr, instance) {
    console.log(this.selectedDateElem.classList);
 } ...
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/06 16:39

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

    キャンセル

  • x_x

    2018/11/06 16:40

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

    キャンセル

  • van-0215

    2018/11/06 16:45

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

    キャンセル

回答 1

0

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

let selectedDatesLength = 0;
  onChange: function (selectedDates, dateStr, instance) {
    console.log(selectedDates.length - selectedDatesLength);
    selectedDatesLength = selectedDates.length;
  }


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

-- 確認用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>flatpickr</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/flatpickr.min.css" />
 </head>
 <body>
<input class="flatpickr" />
<!--script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.2/l10n/ja.js"></script>
<script>
const nextYear = '2019';
const nextMonth = '11';
const nextDay = '10';
let selectedDatesLength = 0;
const config = {
  altInput: true,
  altFormat: "d",
  locale: "ja",
  dateFormat: "Y/m/d",
  mode: "multiple",
  inline: true,
  shorthandCurrentMonth: true,
  altInputClass: "hidden-altInput",
  minDate: '"' + nextYear + '/' + nextMonth + '"', //翌月のカレンダーだけ表示
  maxDate: '"' + nextYear + '/' + nextMonth + '/' + nextDay + '"',
  onChange: function (selectedDates, dateStr, instance) {
    console.log(selectedDates.length - selectedDatesLength);
    selectedDatesLength = selectedDates.length;
  }
};
flatpickr('.flatpickr', config);
</script>
 </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/06 17:36

    ありがとうございます!
    let selectedDatesLength = 0; の部分ですが、グローバル変数として定義をすると思うのですが、onChange()時をするたびに0になってしまいます。
    x_x様が動作を確認してくださったのであれば、全体のソースを見せていただけたらありがたいです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る