jquery UI のdatepickerを使うことになった。
ただ使うだけなら問題ないのだが
元々、入力範囲をcloneしていて、そこにdatepicker の入力テキストを追加することになった。
試したところcloneして表示したものが動作しない。
ネットで探した。
https://www.softel.co.jp/blogs/tech/archives/4426
こちらのサイトに答えが載っていた。
//複製して var clone = $('あるinput').clone(); //どこかに追加して $('どこか').append(clone); //日付入力可能にする clone.removeClass("hasDatepicker") // classを削除 .removeData("datepicker") // 関連づけられたデータを削除 .removeAttr("id") // idも削除 .unbind() // 関連づけられた関数を削除 .datepicker(); // datepickerを再設定
実際には、text要素だけをコピーするのではなく
ブロックごとコピーするので下記のようにした。
var copy_object = $('#input-block1'); copy_object .clone() //複製 .hide() .insertAfter(copy_object); // オリジナル要素のあとに挿入 .attr('id', 'input-block2') // クローンのid属性を新しいものに変更 .end() // 一度適用する .find('select,button,table,:text').each(function(idx, obj) { // テキスト以外にも検索して要素のIDなど変更 // datepickerテキスト if ($(obj).attr('class') == 'datepicker') { // カレンダーアイコンを削除 $(obj).next(".ui-datepicker-trigger").remove(); //日付入力可能にする clone.removeClass("hasDatepicker") // classを削除 .removeData("datepicker") // 関連づけられたデータを削除 .removeAttr("id") // idも削除 .unbind() // 関連づけられた関数を削除 .datepicker({ showOn:'both', buttonImageOnly: true, buttonImage: '/images/ico-calendar.png', beforeShowDay: function(date) { // 日曜日 if (date.getDay() == 0) { return [true, 'sunday']; } // 土曜日 if (date.getDay() == 6) { return [true, 'saturday']; } // 平日 return [true, '']; } }); } }); var clone = $('input-block2]'); // cloneした要素全体を取得 clone.slideDown('slow'); // cloneをスライドで表示