エラー内容
jQueryのdatepickerを同じページ上の複数のフォームで使用する際、カレンダーはそれぞれに表示させることができたのですが、日付をクリックしたときにデータがフォームに入力されず、
Uncaught TypeError: Cannot set property 'currentDay' of undefined
というエラーが発生してしまいます。
試してみたこと
調べたところ、上記のような記載を見つけ、実際に自分のサイトでも一番最初のフォームでは正常に動作しており、それ以降のフォームが正常に動作できていないことから、これと似たような状況かと考え、下記のようなコードを書いてみました。
jQuery
1$(function() { 2 $(".js-modal-open-edittask").on("click", function() { 3 row = $(this).attr("data-row"); 4 $("#ui-datepicker-div").remove(); 5 $('.form-date').removeClass("hasDatepicker") 6 $('.form-date[data-row =' + row + ']').datepicker({ 7 numberOfMonths:3, 8 }); 9 }); 10});
フォームはモーダルウィンドウで表示されるようになっており、.ja-modal-open-edittaskというクラスがついた要素をクリックするとモーダルウィンドウが開くようになっているので、モーダルウィンドウが表示されたときに#ui-datepicker-divというdatepickerで付与されるdiv要素を削除し、改めてフォームにdatepickerを再設置しています。
また、eachメソッドを使って複数のフォームを表示しているので、カスタムデータ属性を付与してdata-rowに入っているidと一致するidを持つフォームにだけdatepickerが付与されるように記載しています。(.js-modal-open-edittaskと.form-dateのdata-rowには同一のidが入っています)
上記のような記述をしても、カレンダー自体は表示されるが、日付をクリックしてもデータがフォームに入力されない状態です。(一つ目のフォームだけ正常に動作しており、それ以外のフォームがこの状態)
どこか記述が間違っているのか、そもそものやり方が異なっているのか、解決方法がわからない状態です。
どうしたらこのエラーを解消することができるのかご存知の方いらっしゃいましたらご教授いただけたらと思います。
あなたの回答
tips
プレビュー