一覧画面に日付入力項目を追加して、カレンダーよりセットしたい

kintone カスタマイズ
1

一覧画面のデータの絞り込みについて質問していた者です。
https://cybozudev.zendesk.com/hc/communities/public/questions/202902150-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E5%89%8D%E3%81%AB-%E6%A4%9C%E7%B4%A2%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%AB%E6%9D%A1%E4%BB%B6%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97-%E7%B5%9E%E3%82%8A%E8%BE%BC%E3%82%93%E3%81%A0%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%92%E8%A1%8C%E3%81%84%E3%81%9F%E3%81%84?locale=ja

ドロップダウンの項目だけでなく、日付の項目を追加してデータの絞り込みを行いたいと思っています。
フォームで作成した日付項目のCSSの適応などしましたが、カレンダーを表示して値を戻す部分の組み込みがうまくいきません。
何かの記述が不足しているのかと思います。
onClickなどの追加をするのかと要素検証より確認していますが、まだ見つけられていません。
ご存じの方がいらっしゃればお聞きできればと投稿します。

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘text’);
input.setAttribute(‘class’, ‘input-date-text-cybozu’);
//画面に追加
kintone.app.getHeaderMenuSpaceElement().appendChild(input);

2

c.maedaさん

input.setAttribute('class', 'input-date-text-cybozu');

こちらから察するに、kintoneで使われているフィールドと同様の挙動をカスタマイズで追加した要素に設定しようという試みだと思いますが、kintoneの元々のフォーカスやクリックのイベントの設定状況等がわかる必要があったり、所謂非推奨の方法になるかと思います。代案としては、jQuery UIのDatepickerを利用した

var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("id", "target-date");
input.setAttribute("size", "12");
kintone.app.getHeaderMenuSpaceElement().appendChild(input);

$.datepicker.setDefaults($.datepicker.regional['ja']);
$('#target-date').datepicker({
  dateFormat: 'yy-mm-dd',
  showOn: 'both',
  changeMonth: true,
  changeYear: true
});

等の方法で実現することが多いのではないかと思います。

3

Ryu Yamashita様

ご回答、ありがとうございます。
代案でご教授頂きましたjQuery UIでのDatepickerで対応するかなど、勉強、検討させていただきました。

現在の案件では、そこまでの組み込みを望んでいないようですので、今回は別の方法（プルダウンでの選択）で日付選択をするようにしたいと思います。

今後、作業の合間をみてjQuery UIの使用などを試してみたいと思います。