datepickerを動的に使いたい

Question

前提・実現したいこと

（例）JavaScript・HTMLでweb画面を作っています。
Datepickerでオブジェクトに日付を入力できる機能を実装中です。

画面には日付を入力するオブジェクト（以下オブジェクトA）と、
日付を入力するオブジェクトを追加するボタンがあります。（JavaScriptでオブジェクトAを複製）

初期状態で表示しているオブジェクトAにはDatePickerが実装できており正常に動くのですが
追加ボタンでしたオブジェクトには横にカレンダーのマークは表示されるのですが、クリックしてもカレンダーが出てきません。

google検証ウィンドウで確認したところ、オブジェクトAを複製しているため要素IDも同じになっていました。
方法としては、
①追加したオブジェクトのみ要素IDを上書きしてDatePickerを設定する
②すべてのオブジェクトのDatePickerの紐づけを解除し、再設定する
と思うのですがやり方が分かりません。

オブジェクトAも追加したオブジェクトもDatePickerでカレンダーから日付を選択できるようにしたいです。

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

発生している問題・エラーメッセージ

該当のソースコード

//jS


function setDatePickerSelector($selector){
    $selector.each(function(){
        $o = $(this);
        $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
        $o.datepicker("option", "showOn", 'button');
        $o.datepicker("option", "buttonImageOnly", true);
        $o.datepicker("option", "buttonImage", 'images/calendar.png');
    });
}

function clearDatePickerSelector($selector){
    alert("clear");
    $selector.each(function(){
        $.removeData(this);
    });
}

$(function(){
    //カレンダー設定
    setDatePickerSelector($("input.test_date"));
    
    //AddDel実装
    var adddel = new AddDelManager("test_List");
    adddel.onAddItem = function ($row, idx, addByBtnFlg) {
   
 　　//カレンダー設定クリア
    clearDatePickerSelector($("input.tax_date"));
};


//HTML
<div id="container">
        <div class = "wrapper">
            <ul>
                <li class="flex calendar group">
                    <p class="lbl">日付</p>
                    <div id ="test_List">
                        <div class ="test_row">
                            <input class="test_date" type="text" name="test_date[]" placeholder="日付" value="" >
                        </div>
                    </div>
                </li>
                                
            </ul>
        </div>
    </div>

試したこと

https://ameblo.jp/naru-dino/entry-11718175108.html?frm=theme
https://ameblo.jp/naru-dino/entry-11934588143.html?frm=theme

上記URLを参考に、
追加したオブジェクトを取得して、setDatePickerSelectorを行う方法を試したのですが、
動作せず。

補足情報（FW/ツールのバージョンなど）

Comments

[kei344]

（質問文は編集できます）プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[FSI]

DatePicker参考URL : https://webllica.com/jquery-ui-datepicker-by-calendar-icon/

Answer 1

これと同じ現象じゃないでしょうか？jQueryの場合要素を複製してもイベントは継承されません。

動的に生成したDOM要素に対してjQueryでイベントを設定する場合

また、至る箇所にカレンダーAPIを使用するなら、ユニークにしか制御できないidではなくてクラスで指定して、その中でjQueryのメソッドを利用したらいいと思います。

function setDatePickerSelector($selector){
    $(document).on("click",$selector,function(){
        $o = $(this);
        $o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
        $o.datepicker("option", "showOn", 'button');
        $o.datepicker("option", "buttonImageOnly", true);
        $o.datepicker("option", "buttonImage", 'images/calendar.png');
    })
}

最終的にこのようにして解決させました。イベントは複製先は継承されないが、複製元は維持されるという特性を利用しています。

//カレンダーの設定
　　var status = {
    　　buttonImage: "(画像URL)",        // カレンダーアイコン画像
    　　buttonText: "カレンダーから選択", // ツールチップ表示文言
    　　buttonImageOnly: true,           // 画像として表示
    　　showOn: "both",                   // カレンダー呼び出し元の定義
    　　dateFormat:'yy-mm-dd', 
　 };
//カレンダーイベント
　　$('.test_date').datepicker(status);
    $(document).on('click', '[type="button"]', function(){
        var r = this.parentNode;
        var clone = $(r).clone();
        $(r).after(clone);
		//clearDatePickerSelector(status);
        $('.test_date', clone).removeClass("hasDatepicker")
            .removeData("datepicker")
            .removeAttr("id")
            .datepicker(status)
		    .parent().find('img').not(':first').remove();
    });
})

Comments

[FSI]

ご回答ありがとうございます。
はい、制御はクラス指定でおこなっております。
以下メソッドで通り追加したオブジェクトへカレンダーは追加できたのですが
クリックしてもカレンダーが開きません。
テスト用アラートは表示されるので、メソッドは通っております。
あとは、カレンダーが表示され日付が選択できればよいのですが。
function setDatePickerSelectorTest($selector){
$selector.each(function(){
$(document).on("click", $selector, function(){
$o = $(this);
$o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
$o.datepicker("option", "showOn", 'button');
$o.datepicker("option", "buttonImageOnly", true);
$o.datepicker("option", "buttonImage", 'images/calendar.png');
});
});
}

[FKM]

each文はいらないですね、スミマセン…。

[FSI]

いえ、こちらこそお手数をお掛けしすみません。
しかしながらeach文を消してもカレンダーが表示されませんでした。
ソースを確認するとdatepickerが採番するidが複製元と同じになってしまっているのがダメなようなきがします。
このメソッドを通るときにidを再採番することは可能でしょうか。

function setDatePickerSelectorTest($selector){
//$selector.each(function(){
$(document).on("click", $selector, function(){
$o = $(this);
$o.datepicker({ buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd' });
$o.datepicker("option", "showOn", 'button');
$o.datepicker("option", "buttonImageOnly", true);
$o.datepicker("option", "buttonImage", 'images/calendar.png');
});
//});
}

[FKM]

idをやめてclassにしてください。idは名の通りアイデンティファイド（同一の紐づけ）しかできませんので、javascriptの場合一番最初のIDセレクタしか読み込みません。もし、それでもIDを付けたい場合はid1、id2という風に連番を振るように設定することで解決します。

[FSI]

何度もすみません。ここでいうidは任意で設定した値ではなく、Datepickerを設定した場合に自動で振り分けられるid属性だと思っているのですが、これをclassに変更することが可能なのでしょうか?

https://www.softel.co.jp/blogs/tech/archives/4426
下記URLでそのidを削除するところまではできましたが、datepickerを再設定（idを再採番）ができない状況です。

.removeClass("hasDatepicker") // classを削除
.removeData("datepicker") // 関連づけられたデータを削除
.removeAttr("id") // idも削除
.unbind() // 関連づけられた関数を削除
.datepicker(); // datepickerを再設定

[FKM]

そのURL通りの方法の方が良さそうですね。下に答えを書いてるみたいなので、そのスクリプトをhtmlの後に記述すれば行けるのではないかと思います。

[FSI]

URLの方法でidも再採番ができましたが、カレンダーが表示されません。
検証モードで確認しても問題なさそうなので、内部的な紐づけができていないのかと考えております。何度もすみません。

function setDatePickerBySelector($selector){
//[注意] 要素のID属性はちゃんとユニーク設定 にするか、あるいは未設定にすること。
$selector.each(function(){
$o = $(this);
$o.datepicker({buttonText:'ｶﾚﾝﾀﾞｰ表示',dateFormat:'yy-mm-dd'});
$o.datepicker("option", "showOn", 'button');
$o.datepicker("option", "buttonImageOnly", true);
$o.datepicker("option", "buttonImage", 'images/calendar.png');
});
}

function resetDatePicker($selector){
$( '.datepicker' ).datepicker( 'destroy' );
setDatePickerBySelector($selector);
$( '.datepicker' ).datepicker( 'refresh' );
}

[FKM]

idを取得してきているならeachは不要です。

[FSI]

eachも無くしてみたのですが、やはりカレンダーは表示されません。
元々あった入力項目のカレンダーは表示されるのですが、
追加した入力項目はidを取得できているにもかかわらずカレンダー表示されません。

[FKM]

テストしてみたらいけましたので、サンプルも貼っておきます。
参考サイトは意図的にイベントバブリングの外側に退避してから、クローンするという手段をとっていますが、セレクタをdocumentにする方法でうまくいったので活用してください。

http://motoflabo.s500.xrea.com/clone.html

やはり、根本的な原因はイベントの継承問題でした。

[FSI]

とりあえずコントロールのみだと再現できました。（カレンダーアイコンはやはりだめでした）
動きとしては問題なく動作しております。
大変お世話になり本当にありがとうございました。

初期コントロールへのカレンダーセット
function setDatePickerBySelectorNonImg($selector){ //システム設定の消費税パターン yamazoe
//[注意] 要素のID属性はちゃんとユニーク設定 にするか、あるいは未設定にすること。
$selector.each(function(){
$o = $(this);
$o.datepicker({dateFormat:'yy-mm-dd'});
$o.datepicker();
});
}

追加コンロトロールへのカレンダーセット
adddel.onAddItem = function ($row, idx, addByBtnFlg) {
$addsel = $row.find("input.tax_date");
$addsel.removeClass("hasDatepicker");
$addsel.removeData("datepicker"); // 関連づけられたデータを削除
$addsel.removeAttr("id"); // idも削除
$addsel.unbind(); // 関連づけられた関数を削除
$addsel.datepicker({ dateFormat:'yy-mm-dd' });
$addsel.datepicker();
};

[FKM]

一旦は解決されて何よりです。カレンダーアイコンについても調べてみます。分かり次第、また回答させていただこうと思っております。

[FKM]

カレンダーアイコン実装しました。しっくりこないところはありますが、テストページを閲覧いただけたらと思います。理屈としては、要素の複製先はイベントは継承されませんが、複製元はイベントが維持される特性を利用し、要素だけ複製しておいて、イベントは継承されるように複製元だけ保持して複製したアイコンは無用なので消去、という方法です。

[FSI]

閲覧しました!ありがとうございます。
参考にさせていただきます。
$(function(){
//カレンダーの設定
var status = {
buttonImage: "(画像URL)", // カレンダーアイコン画像
buttonText: "カレンダーから選択", // ツールチップ表示文言
buttonImageOnly: true, // 画像として表示
showOn: "both", // カレンダー呼び出し元の定義
dateFormat:'yy-mm-dd',
};
$('.test_date').datepicker(status);
$(document).on('click', '[type="button"]', function(){
var r = this.parentNode;
var clone = $(r).clone();
$(r).after(clone);
//clearDatePickerSelector(status);
$('.test_date', clone).removeClass("hasDatepicker")
.removeData("datepicker")
.removeAttr("id")
.datepicker(status)
.parent().find('img').not(':first').remove();
});
})