【フォームブリッジ】datepickerでエラーが出力されます

お世話になります。

 

掲題の件、フォームブリッジでdatepickerを使用して、カレンダーから生年月日を入力するように設定しております。

対象のフォームは文字列フォームで、フォームコードは「生年月日」としています。

 

上記の内容でdatepickerのカレンダーは表示されて選択はできるのですが、

選択後に、再度カレンダーを表示し日付を選択しようとすると以下のエラーが出力され日付が選択できません。

=========================================

Uncaught Missing instance data for this datepicker

=========================================

 

以下、利用しているjsの内容です。

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js

・datepicker.js

 

<datepicker.jsの内容>

========================================================

(function() {
“use strict”;

//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

//datapickerを付与するinputフォームにclass、idを追加
$(‘input’).eq(0).addClass(‘datepicker_grant’);
$(‘input’).eq(0).attr(‘id’, ‘datepicker_input1’);

$(‘#datepicker_input1’).attr(‘readonly’,true);

//datepicker表示
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[“ja”] );
$(‘#datapicker_input1’).datepicker({
dateFormat: ‘yy-mm-dd’,
changeMonth: true,
changeYear: true,
yearRange: ‘-70:+5’,
defaultDate: ‘-25y’,
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(function() {
var buttonPane = $( input )
.datepicker( “widget” )
.find( “.ui-datepicker-buttonpane” );
var btn = $(‘<button class=“ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all” type=“button”>クリア</button>’);
btn
.unbind(“click”)
.bind(“click”, function () {
$.datepicker._clearDate( input );
});
btn.appendTo( buttonPane );
}, 1 );
},
onSelect: function (selected_date) {
//申請者の生年月日フィールドに値を入力
state.record.生年月日.value = selected_date;
}
})
});

return state;

}];

})();

========================================================

上記で、onSelect: function (selected_date) { に記載している

「state.record.生年月日.value = selected_date;」をコメントアウトするとエラーは出力されなかったので、

カレンダーから選択した日付を文字列フォームに設定する際に何かしらエラーがあるのだと思うのですが、解決できませんでした。

 

アドバイスなどいただけると幸いです。

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

フォームブリッジで日付フィールドを使って、kintoneの繋ぎ先は文字列(1行)にすることではダメなのでしょうか?

落合 雄一 様

 

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

datepickerを利用する意図を記載しておらず、失礼いたしました。

 

今回、生年月日の入力するフォームを用意したいのですが、

フォームブリッジ標準機能の日付フィールドを使用すると、「年」の選択が若干分かりづらいかと思い

別の方法はないかと模索しております。

 

iosユーザーについては、文字列フィールドに対して<input type=“date”>と指定することでドラム式のような日付選択を設定しているのですが、

androidユーザーやchromeユーザーに関してはまだ対応していないようなのでdatepickerを採用し、オプションのchangeMonth: true,
changeYear: trueを設定することで年が選択しやすいのではないかと思った次第です。

なるほど!

理解しました!

少し考えるので、また回答させてください!

y-kishi さん

 

フォームブリッジのようなリアクティブなデータ処理とjQueryは相性が悪いので、フォームブリッジの input要素に紐付けると思わぬエラーを吐く場合があるかと思います。

 

datepicker の使い方としては、以下のような方法はどうでしょう?

  • 本来利用する日付フィールドは非表示にする

  • fb.events.form.mounted イベントで input要素を独自に任意の場所に置く

  • 自作した input 要素に datepicker を紐付ける

- datepicker の onSelect イベントで state.record.生年月日.value = selected_date; する

 

以上、参考になりますでしょうか?

落合 雄一 様

 

ご返事が遅れてしまい申し訳ございません。

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

 

相性が悪いということもあるのですね。

ご提案いただいたinput要素を自作してという方法で実装してみたいと思います。

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