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をスライドで表示