[英]How to activate bootstrap datepicker in a table?
我有一個腳本,將腳本附加到表中。 每行都有兩個datepicker文本框,分別用於start_date
和end_date
。
var rows = "";
$("#btn_add").on('click', function(i){
var ct_row = $("#t_activity tr").not('.header').length+1;
rows = "<td class='text-center'><div class='date_set date_2'>";
rows += "<input type='text' class='form-control date dt_set' placeholder='start' onCopy='return false'";
rows += " onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' />";
rows += "</div></td>";
rows += "<td><div class='date_end date_2'>";
rows += "<input type='text' class='form-control date dt_end' placeholder='Finish' onCopy='return false'";
rows += " onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' />";
rows += "</div></td>";
$("#t_activity").append("<tr class='tr_content'>"+rows+"</tr>");
});
如果我button click event after the append
datepicker
腳本放在button click event after the append
,則它可以正常工作,但是我需要在button event
之外處理datepicker
。 這是datepicker
腳本:
//START
$('.date_set .date').datepicker({
startView : 0,
forceParse : true,
autoclose : true,
format : "dd/mm/yyyy",
todayHighlight : true,
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.date_end .date').datepicker('setStartDate', minDate);
});
$('.date_end .date').datepicker({
startView : 0,
todayBtn : "linked",
forceParse : true,
autoclose : true,
format : "dd/mm/yyyy",
todayHighlight : true,
}).on('changeDate', function (selected) {
$('.date_set .date').datepicker('setEndDate', selected.date);
});
//END
我試圖像這樣更改腳本,但是它無法顯示datepicker
:
$("#t_activity tbody").on('click','.date_set .date',function(){
$(this).closest('tr').find('div .dt_set').datepicker({
startView : 0,
forceParse : true,
autoclose : true,
format : "dd/mm/yyyy",
todayHighlight : true,
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.date_end .date').datepicker('setStartDate', minDate);
});
});
首先,您需要聲明為datepicker
是輸入本身。 因此,在第一種情況下,它將是類dt_set
而不是date_set
。
其次,當使用委托方法時,可以使用focus
事件,而不是click
事件
$('#t_activity').on('focus',".dt_set", function(){
});
演示: https : //jsfiddle.net/zw4a8pfv/
或者,如果您在table
中使用tbody
,也可以將其聲明為波紋管
$('#t_activity tbody').on('focus',".dt_set", function(){
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.