【フォームブリッジ】日付フォームのカスタマイズについて

kintone カスタマイズ
1

お世話になっております。

 

掲題の件、フォームブリッジの日付フォームのカスタマイズについてお伺いしたいです。

通常、日付フォームを設置すると土日祝関係なく日付を選択できますが、これを土日祝は選択できないようにカスタマイズすることは可能でしょうか？

 

Datepickerを使用すれば上記のようなカスタマイズは出来たのですが、テーブル内に日付を入力するフォームを設置した場合、行を追加した際にDatepickerが機能せず、

標準の日付フォームで何とかカスタマイズできないかと思った次第です。

 

アドバイスなどいただければ幸いです。

お手数ですが、よろしくお願いいたします。

 

2

一番簡易な方法としては、任意のバリデーションを追加できる機能があるので、土日祝をはじくバリデーションをかけることができます。

 

ただ、y-kishiさんの希望としてはそもそも選択できないようにしたいのかと思います。

その場合、独自で日付フォームを完全にリプレイスする必要があるかと思います。

3

y-kishi様

お世話になっております。
cstapの江田と申します。

無理やりですが、以下のコードで実装できるかと思います。
ただし、DOMのクラス名を利用しているためForm Bridgeの仕様変更により動作しなくなる可能性があります。

JavaScript

(function(){"use strict";fb.events.form.mounted=[function(state){document.addEventListener('click',function(e){varelement=e.target,row,cell;while(element.parentNode.classList){if(element.classList.contains('el-date-table\_\_row'))row=element;if(element.parentNode.classList.contains('el-date-table\_\_row'))cell=element;element=element.parentNode;}if(row&&cell){if([].slice.call(row.children).indexOf(cell)===0||[].slice.call(row.children).indexOf(cell)===6){e.stopPropagation();}}},true);}];})();

CSS

.el-date-table\_\_rowtd:first-child,.el-date-table\_\_rowtd:last-child{background:#000;}
4

落合 雄一 様

江田篤史 様

 

ご回答いただきありがとうございます。

教えていただいたコードで土日を選択不可にすることができました。

 

あとは祝日をはじくバリデーションと組み合わせて、うまい具合にカレンダーを表示できるか検証してみます。

 

お二人のアドバイス、大変参考になりました。

ありがとうございます！