嘗試要複製一個表格列,裡頭有輸入日期的 input,想把它的資料清掉,讓使用者能輸入多筆資料。

"How to clone jQuery Datepicker input field" 這篇找到解答。

var row = $($("table > tbody tr")[0]).clone(); // 複製資料列(資料列內包含輸入框)
$(row).find("input").val("").end(); // 清空值

// 要移除 datepicker 自動產生的 hasDatepicker css class,以及自動產生的 ID
// 不移除 css class,datepicker 會完全不運作
// 不移除 id,點了新增列的 datepicker,值會被帶進原來的那個 input 裡
$(row).find("input").removeClass("hasDatepicker").removeAttr("id").datepicker({
    minDate : new Date(2009, 1 - 1, 1),
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy/mm/dd'
}).end();

$('table > tbody:last').append(row); // 把處理好的資料列新增到表格裡,做為最後一列

 

這次學到的技巧是:

  1. 要用 .end() 方法,這樣才能確實把 clone 後的物件裡的 input 值清空。
  2. datepicker 會自動為 input 加上 id,以便日期選定後有地方可以傳回去,也會自動為 input 加上 CSS class。新增的物件要確實把這些東西洗掉,再重新綁定 (bind) ddatepicker,這樣日曆控制項才會正常運作。

 

打完收工~

arrow
arrow

    小攻城師 發表在 痞客邦 留言(8) 人氣()