タイムピッカーの単位を30分区切りから１時間区切りで選択できるように変更したい

kintone カスタマイズ
1

【達成したいこと】
・タイムピッカーの単位を30分区切りから１時間区切りで選択できるように変更したい

【要件】
・外部プラグインは使用しない
・JavaScript または CSSのみのカスタマイズで解決したい

【課題】
・デフォルトの30分区切りから変更する方法が外部プラグインを使用する以外に発見できない

【ご質問】
・上記の要件を満たして課題の解決は可能でしょうか？
・具体的な方法がございましたらご教示頂けますと幸いです。

以上よろしくお願いいたします。

2

YudaiNodaさん

こんにちは。

 

時間の選択値から30分単位のものを無理やり削除するもので良ければ、以下の形でできました。

時刻部分がクリックされると、選択値の要素「goog-menuitem」が生成されます。

それをMutationObserverで監視し、生成されたら各選択値（要素）をfor文でチェックし、30分単位であれば要素ごと削除します。

 

レコード追加時の例ですので、レコード編集時でしたらapp.record.edit.showに記載してみてください。

※すべての日時・時刻フィールドに対して適用されます。

 

(function() {

'use strict';

var events = ['app.record.create.show'];
kintone.events.on(events, function(event) {

const target = document.body;
// ノードに変化があれば実行
const observer = new MutationObserver(function() {

// 時刻選択要素を取得
var el = document.getElementsByClassName('goog-menuitem');
for (var i = 0; i < el.length; i++) {
// 30分単位は要素を削除
if (el[i].textContent.slice(-2) == '30') {
el[i].parentNode.removeChild(el[i]);
}
}

});
const config = { childList: true, subtree: true }; // 監視を指定するオプション
observer.observe(target, config); // 監視開始

});

})();
3

koichiさんご丁寧にありがとうございます！

お返事遅くなりました。

MutationObserverを使用しても実現できるのですね。。。

勉強になります。

 

一旦、こちら自己解決いたしましたので私のソースを以下に掲載させていただきます。

他の方の参考になりますと幸いです。(呼び出し元は他の処理が記述されており邪魔になるので、タイムピッカーを一時間単位に変更するメソッドのみ掲載します。なおjQueryを使用しています)

function changeTimePiccekrToHourly() {

    const defaultTimeItems = $(".goog-menuitem-content");
    const defaultTimeItemsLength = defaultTimeItems.length;
  const regex = /^([0-9]|1[0-9]|2[0-3]):30$/g;

for(let i=0; i< defaultTimeItemsLength ; i++){
 if (defaultTimeItems[i].textContent.match(regex)) {
       defaultTimeItems[i].parentNode.remove();
     }
}
}
4

YudaiNodaさん

ご返信とソース記載ありがとうございます。

自己解決されたとのことで何よりです。

functionで定義してあげた方がシンプルになって良いですね。