jQuery UI DatePicker カレンダー表示されない

kintone カスタマイズ
1

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

 

jQuery UI の DatePicker をカスタマイズビュー上に配置したのですが、

カーソルが入ってもカレンダーが表示されません。

（テキストフィールドのみ表示された状態）

 

読み込んでいるjsファイル

https://js.cybozu.com/jquery/3.2.1/jquery.min.js

 

https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js

 

日本語化、およびCSSファイルも読み込んでいましたが、現象確認のために

外しています。

 

 

ソース

jQuery.noConflict();

(function() {
// レコードを保存するためのメソッド
“use strict”;

// 一覧表示
kintone.events.on(“app.record.index.show”, function(event) {

if (event.viewId !== 5352111 && event.viewId !== 5352185) return event;
if(event.viewId == 5352111){
//日付テキスト
var inpDate = document.createElement(“input”);
inpDate.type = “text”;
inpDate.id = “cal”;
jQuery(“#cal”).datepicker({
});
}
return event;
});

 

IE11、Chrome で試しましたが、いずれも動作せず、

特にコンソール上にエラーも吐き出していません。

 

お気づきの点がありましたら、ご教示いただけると幸いです。

2

遠藤さん

>jQuery UI の DatePicker をカスタマイズビュー上に配置したのですが、

コードを見たところ、「inpDate」を生成していますが、DOM に配置されていないようです。

エラーにならないのは、document 上にjQuery(“#cal”)の対象が無いためだと思います。

カスタマイズビュー設定の「HTML」に、<div id=“sample1”></div> などを設定して、 その div に「inpDate」を子要素として追加してください。

そのあとに、 datepicker を指定すると、表示されると思います。

3

ありがとうございます！

申し訳ありません、下記のコードが遥か下にあり、そのため動作しておりませんでいた。

// メニューの右側の空白部分にボタンを設置
kintone.app.getHeaderMenuSpaceElement().appendChild(inpDate);

 

jQuery(“#cal”).datepicker({});

の上に配置することで、解消いたしました。

ご指摘ありがとうございました。

4

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。