CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-uidatepicker
Vahn
Vahn

Reputation: 542

How to activate bootstrap datepicker in a table?

I have a script that apppend a row into a table. Each row has two datepicker textboxes for start_date and 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>");
});

If I put the datepicker script inside the button click event after the append, it's working but I need to process the datepicker outside the button event. This is the datepicker script: 

//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

I've tried changing the script like this but the it's failed to show the 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);
    }); 
});

Upvotes: 0

Views: 1958

Answers (1)

Mark
Mark

Reputation: 2071

First, what you need to declare as a datepicker is the input itself. So, in the first case, it would be class dt_set rather than date_set.

Second, when using the delegate method, you could use focus event, rather than click event

$('#t_activity').on('focus',".dt_set", function(){
});

Demo : https://jsfiddle.net/zw4a8pfv/

Or, if you are using tbody in your table you could also declare it as bellow

$('#t_activity tbody').on('focus',".dt_set", function(){
});

Demo : https://jsfiddle.net/zw4a8pfv/1/

Upvotes: 1

Related Questions