スペースフィールドのIDを取得し、表題の通り日付のフォームを生成しようとしています。
jQueryのプラグウインであるbootstrap-datepickerの使用を試みています。
jQueryはCDNのURL、bootstrap-datepickerのファイルをそれぞれ読み込み
scriptには以下の記述をしています。
—▽scriptここから▽---------------------------------
(function() {
“use strict”;
$(‘#sandbox-container input’).datepicker({
startView: 2,
todayBtn: “linked”,
language: “ja”,
beforeShowYear: function(date){
if (date.getFullYear() == 2007) {
return false;
}
}
});
kintone.events.on(‘app.record.edit.show’, (e) => {
var el = kintone.app.record.getSpaceElement(‘testElement’); //スペースのフィールドコード
var inpEle = document.createElement(‘input’);
var divEle = document.createElement(‘div’);
inpEle.type = ‘text’;
$(inpEle).addClass(‘form-control’);
divEle.id = ‘sandbox-container’;
divEle.appendChild(inpEle);
el.appendChild(divEle);
return e;
});
})();
—△scriptここまで△-------------------------------------
スペースのフィールドはうまく取得し、idとClassを付与できていますが
必要なライブラリやプラグインのファイルが読み込めていないように見えます。
どなたか、アドバイスいただけないでしょうか。
宜しくお願いいたします。
こちらのjQueryを読み込む順番を一番初めにしてみてください。
aoさん、迅速な回答ありがとうございます！！
さっそく入れ替えてみました。エラーは出なくなりましたが、依然フォーム表示はされませんでした。
McKee さん
jQuery.noConflict(); は、他のカスタマイズやプラグインなどで使っているライブラリとの競合を解消するものです。
まあ、他のプラグインなどを使っていない場合でも、保険として定義しましょう。
イベントは、'app.record.create.show’も処理したほうがいいと思います。
$(‘#sandbox-container input’).datepicker({ は、実際に element が無いと動作しません。
DOMに組み込んでから処理しましょう。
下記は、切り貼りしただけなので、検証してください。
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on(['app.record.edit.show', 'app.record.create.show'], (e) => {
var el = kintone.app.record.getSpaceElement('testElement'); //スペースのフィールドコード
var inpEle = document.createElement('input');
var divEle = document.createElement('div');
inpEle.type = 'text';
$(inpEle).addClass('form-control');
divEle.id = 'sandbox-container';
divEle.appendChild(inpEle);
el.appendChild(divEle);
$('#sandbox-container input').datepicker({
startView: 2,
todayBtn: "linked",
language: "ja",
beforeShowYear: function(date) {
if (date.getFullYear() == 2007) {
return false;
}
}
});
return e;
});
})(jQuery);
rex0220さん
ご教示ありがとうございます。jQuery.noConflict(); の事知りませんでした。
ここで投稿させていただいたscriptはあくまでテストなので、ひとまず編集画面でのみ確認していました。
早速記述のコードを参考に動きを見ていますがまだうまく表示されません。
>>$(‘#sandbox-container input’).datepicker({ は、実際に element が無いと動作しません。
スペースのフィールドを日付用のinputに変えようとしています。
スペースフィールドを取得し、inputタグに変更しています。
↑変更後の状態です。
普通これで動くんですが、なぜだか動きません。
フィールドというelementを取得しinputをDOM内に組み込む…という考えから
scriptを作成しています。
そもそも「element」と「DOMへ組み込む」という認識が間違っているのでしょうか。
jsもkintoneもカスタマイズは最近し始めた為、初歩的な質問で恥ずかしいのですが、ご教示いただけますでしょうか。
こちらで、アプリを作って上記のコードを試したところ動きました。
もしかすると、css を指定していないとか？
bootstrap-datepicker.standalone.min.css
私も jQuery はここ３年で使い始めたばかりで勉強中です。
$(‘#sandbox-container input’).datepicker({ は、
window.document オブジェクト内にあるセレクタ ‘#sandbox-container input’ で抽出できるオブジェクトを取得します。
divEle.appendChild(inpEle);
el.appendChild(divEle);
で、window.document オブジェクトの階層内に組み込まれないと対象オブジェクトを取得できないわけです。
rex0220さん、返信が遅くなり失礼しました。
ご丁寧にご説明いただき感謝いたします！！！
ちなみに私はcssをあてていません。
理由は２点。
①下記のようなエラーが出る。
②css無くても動くことを確認している
（てきとーにHTML＋CSS作って＋jsで簡単に動作を確認しました。でもkintoneでは必須なのかなぁ？？）
今は①の問題解決するよりも動かない点を解決しようと思ってcssをあてていません。
rex0220さんは出来て、私の方でできないのはなぜでしょうか。。。。。
プラグインも入れてない動作検証だけする環境で試みているんですが…
また何か思い当たる事があれば教えてください。
宜しくお願いいたします。
rex0220さん！！
動いていました(汗
cssあててないので予想外の場所に表示されていて、気づかずにいただけでした。
あとはcssがアップロードできない原因などを調べてみようと思います。
ありがとうございました！
CSS 無しでも動きますが、カレンダー表示になりません。
以前表示されたとすれば、たぶん、CDN指定などで指定されていたと思います。
アップロードエラーの原因は、JavaScript 用にアップロードしているためです。
下にPC CSS 用のアップロードボタンがあります。
あ～～～～～～rex0220さん、ありましたぁ～～～～～！！！
なぜ気づかなかったのか・・・ｃｓｓあてる事もできてちゃんと動いています！
ありがとうございます！！
お世話になっております。
ここで書き込んだ通り、改めてカレンダーのJSを実装したところ、カレンダーの表示がされなくなってしまいました。。。
切り分けの調査として何から行うべきでしょうか。
ご教示の程、よろしくお願いいたします。。
とりあえず、
必要なライブラリは指定されているか？、指定の順番は、正しいか？、フィールドコードに変更はないか？
そのあとで、デバッグですね。
kintone カスタマイズ関連リンク集 デバッグ あたりを参考に、デバッグしてみてください。
rex0220さん、いつもありがとうございます。
もちろんライブラリも順番も動いた時と同様にしています。フィールドコードは変更したので変更しました。
デバックは何もエラーが現れず、困ってここに書き込みました。
リンクも改めて参照してみたいと思います。ありがとうございます。