popupdatepickerの年部分をクリックしたことを取得する方法

[TK-N1]

popupdatepicker の「年・月・戻る・進む」のボタンやセレクトを押したことを取得をjavascriptで実装中です。
「月・戻る・進む」は取得することができました。
「月」の取得は下記コードにて実現しております。

$(document).on(‘click’, ‘.gaia-argoui-menuitem-parent’, function () {
console.log(‘OK’);
});

問題は「年」でして、htmlコードを確認すると、「月」と同じclassである「gaia-argoui-menuitem-parent」であったため、「年」「月」のどちらも同一のコードで動作するだろうと考えたのですが、実装してみると「月」でしか動作せず、「年」をクリックしても取得できません。
情報をお持ちの方がいらしたら、御指南いただけますと幸いです。
なお、何年を選択したかはわからなくても構いません。

[wv-sumichan (住田 知基)]

ご存じだとは思いますが念のため、 kintone コーディングガイドライン などで紹介されている リスクのある DOM 操作 であることを明記させていただきますね。

---

調べてみましたが、どうも年をクリックしたときは要素が作り直されているようですね。

要素が消されているからイベントの捕捉ができていないのかと思って、

[ ...document.querySelectorAll('.gaia-argoui-menuitem-parent'), ].forEach(i => i.addEventListener('click', e => console.log('OKeeeeeeeeee')));

みたいなことをしてみましたが、それもだめでしたので、バブリングとかも拒否されているんじゃないかと思います。

もしかしたら他に良い補足方法があるのかもしれませんが、例えば年ドロップダウンの innerText を監視して、変化があったら何か選ばれた…というような検知方法にしたほうが無難かもしれません。

ご参考までに。

[TK-N1]

@wv-sumichan

要素が消されてい

早速のご返信ありがとうございます。
innerTextでの監視、参考にさせていただきます。
また報告させていただきます。

[7110]

すみません。削除しました。

[TK-N1]

先日はアドバイスをいただきありがとうございました。
一応希望する挙動までは実装できました。
ドロップダウンの開閉を検知、及び開閉毎の「年」の文字列を比較。
ドロップダウンが閉じられた際に、開いた際の文字列と違いがあれば選択された。
開閉時の文字列に違いがなければ、ドロップダウンは開かれたが選択はされなかった。（もしくは同一年が選択された）
と、判断するようにいたしました。
もっと正しいアプローチがあるのかもしれませんが、一旦これで出来たことにいたします。
ご助言いただきありがとうございました。

try {
  // クラス 'goog-date-picker-year-container' を持つ要素を選択
  const datePickerContainer = document.querySelector('.goog-date-picker-year-container');
  if (!datePickerContainer) {
    throw new Error('Date picker container not found');
  }

  let isDropdownOpen = false; // ドロップダウンの状態を保持
  let selectedYear = null;    // 選択された年を保持

  // 監視するオプション
  const config = { attributes: true, childList: true, subtree: true };

  // コールバック関数
  const callback = function(mutationsList, observer) {
    try {
      for(let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const dropdownElement = document.querySelector('.gaia-argoui-forms-datepicker-select');
          if (!dropdownElement) {
            throw new Error('Dropdown element not found');
          }

          const isExpanded = dropdownElement.classList.contains('gaia-argoui-forms-datepicker-select-open');
          if (isExpanded && !isDropdownOpen) {
            isDropdownOpen = true; // ドロップダウンが開いた
            const yearElement = document.querySelector('.gaia-argoui-forms-datepicker-select-label');
            if (!yearElement) {
              throw new Error('Year element not found');
            }
            selectedYear = yearElement.innerText;
            console.log('Old Selected year:', selectedYear);
          } else if (!isExpanded && isDropdownOpen) {
            const yearElement = document.querySelector('.gaia-argoui-forms-datepicker-select-label');
            if (!yearElement) {
              throw new Error('Year element not found');
            }
            const newSelectedYear = yearElement.innerText;
            console.log('New selected year:', newSelectedYear);
            if (newSelectedYear !== selectedYear) {
              /* ここにやりたかったことを実装 */
            }
            console.log('close');
            isDropdownOpen = false; // 状態を更新
          }
        }
      }
    } catch (error) {
      console.error('Error in callback function:', error);
    }
  };

  // MutationObserver インスタンスを作成
  const observer = new MutationObserver(callback);

  // 監視を開始
  observer.observe(datePickerContainer, config);

} catch (error) {
  console.error('Error initializing observer:', error);
}