当我在JQuery中使用APPEND函数时，Datepicker不起作用

Question

HTML代码

<tbody class="rowdetail">
<tr style="width:100%;">
                                <td><input type="text" style="width:150px;" class="form-control odate" name="opening_date[]" id="opening_date1" value="<?php echo $opening_date1[$j]?>" required></td>
                                <td><input type="time" style="width:" class="form-control" name="garage_out_time[]" id="garage_out_time1" value="<?php echo $garage_out_time1[$j]?>" required></td>
                                <td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" name="garage_out_km[]" id="garage_out_km1" value="<?php echo $garage_out_km1[$j]?>" required></td>
                                <td><input type="time" style="width:" class="form-control" name="reporting_time[]" id="reporting_time1" value="<?php echo $reporting_time1[$j] ?>" required></td>
                                <td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" name="reporting_km[]" id="reporting_km1" value="<?php echo $reporting_km1[$j]?>" required></td>
                                <td><input type="text" style="width:150px" class="form-control cdate" name="closing_date[]" id="closing_date1" value="<?php echo $closing_date1[$j]?>" required></td>
                                <td><input type="time" style="width:" class="form-control" name="closing_time[]" id="closing_time1" value="<?php echo $closing_time1[$j]?>" required></td>
                                <td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" name="closing_km[]" id="closing_km1" value="<?php echo $closing_km1[$j]?>" required></td>
                                <td><input type="time" style="width:" class="form-control" name="garage_in_time[]" id="garage_in_time1" value="<?php echo $garage_in_time1[$j]?>" required></td>
                                <td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" name="garage_in_km[]" id="garage_in_km1" value="<?php echo $garage_in_km1[$j]?>" required></td>
                                <td><input type="time" style="width:" class="form-control" name="total_hours[]" id="total_hours1" value="<?php echo $total_hours1[$j]?>" required></td>
                                <td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" name="total_km[]" id="total_km1" value="<?php echo $total_km1[$j]?>" required></td>
                            </tr>
                        <?php }?>
                        </tbody>
                    </table>
                    </div>
                        <button type="button" class="btn btn-success" onclick="AddRow();">Add</button>
                        <button type="button" class="btn btn-primary" onclick="RemoveRow();">Remove</button><br><br>                    
                    </div>

我想在这里使用from to date datepicker。加载页面时datepicker即将到来。但是当我append时，datepicker没有来。以下是我的代码。

var i=1;
function AddRow(){
if($(".rowdetail tr").length<7)
        {
            $(".rowdetail").append('<tr><td><input type="text" class="form-control odate1" id="opening_date2" name="opening_date[]"></td><td><input type="time" class="form-control" id="garage_out_time2" name="garage_out_time[]"></td><td><input type="text" style="width:80px;" onkeypress="return isNumberKey(event)" class="form-control" id="garage_out_km2" name="garage_out_km[]"></td><td><input type="time" class="form-control" id="reporting_time2" name="reporting_time[]"></td><td><input type="text" onkeypress="return isNumberKey(event)" class="form-control" id="reporting_km2" name="reporting_km[]"></td><td><input type="text" class="form-control cdate1" id="closing_date2" name="closing_date[]"></td><td><input type="time" class="form-control" id="closing_time2" name="closing_time[]"></td><td><input type="text" onkeypress="return isNumberKey(event)" class="form-control" id="closing_km2" name="closing_km[]"></td><td><input type="time" class="form-control" id="garage_in_time2" name="garage_in_time[]"></td><td><input type="text" onkeypress="return isNumberKey(event)" class="form-control" id="garage_in_km2" name="garage_in_km[]"></td><td><input type="time" class="form-control" id="total_hours2" name="total_hours[]"></td><td><input type="text" onkeypress="return isNumberKey(event)" class="form-control" id="total_km2" name="total_km[]"></td></tr>');
            i = i+1;                
        }           
        else
        {
            alert("You cannot add more rows");
        }  
}
function RemoveRow(){
if($(".rowdetail tr").length>1)
        {
            $(".rowdetail tr:last-child").remove();
        }
        else
        {
            alert("You cannot delete first row");
        }
}

这是我的from to date datepicker代码

$(function () {
$(".odate1").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate() + 1);
        $(".cdate1").datepicker("option", "minDate", dt);
    }
});
$(".cdate1").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate() - 1);
        $(".odate1").datepicker("option", "maxDate", dt);
    }
});
});

如何动态创建from to date时显示datepicker textbox？

下面的JsFiddle

https://jsfiddle.net/u90evvrn/