如何在表中激活引导日期选择器？

Posted 2023-05-08

【中文标题】如何在表中激活引导日期选择器？

【英文标题】：How to activate bootstrap datepicker in a table?

【发布时间】：2017-12-25 13:09:13

【问题描述】：

我有一个将一行追加到表格中的脚本。每行有两个日期选择器文本框，分别用于 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>");
);

如果我将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);
    ); 
);

【参考方案1】：

首先，您需要声明为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()
);

演示：https://jsfiddle.net/zw4a8pfv/1/

【讨论】：

哇，谢谢。在我的问题中，focus 比 click 好。还有一个，你知道2nd row start textbox startdate = 1st finish textbox value、3rd row start textbox startdate = 2nd finish textbox value等怎么设置吗？

@Vahn 欢迎您。那将是一个不同的问题，您应该为此提出另一个问题。