How can show datepicker calendar in a row which are added newly - html

Question

I am trying to show a datepicker calendar in each row of table . But it shows only first row. When I add new row in a table, the datepicker is not showed newly added rows.
Model class
[DataType(DataType.Date, ErrorMessage = "Date only")]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public string FromDate { get; set; }
[DataType(DataType.Date, ErrorMessage = "Date only")]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public string ToDate { get; set; }
Html file
<table>
<tbody>
<tr>
<td>#Html.TextBoxFor(model => model.FromDate, new { #class = "form-control" })</td>
<td>#Html.TextBoxFor(model => model.ToDate, new { #class = "form-control" })</td>
</tr>
</tbody>
</table>
<button type="button" id="btnUpdate" name="submitButton" value="DeleteAtt"
class="btn btn-primary form-control" onclick="AddNew();">
<i class="fa fa-save"></i><span class="padding-left-ten">Add New Row</span>
</button>
<script type="text/javascript">
$(document).ready(function () {
$("#FromDate").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
$("#ToDate").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
});
function AddNew() {
var clone = $("#tblEntry tr:last").clone().find('input').val('').end().insertAfter("#tblEntry tr:last");
}
</script>

Answer 1

First, you'll need to stop duplicating id values in your HTML. Those need to be unique across the DOM, otherwise your selectors will have no way to identify multiple elements with the same id. Instead, assign a class that you can recognize for the date inputs. For example:
<td>#Html.TextBoxFor(model => model.FromDate, new { #class = "form-control date-input" })</td>
#Html.TextBoxFor(model => model.ToDate, new { #class = "form-control date-input" })
Note the new "date-input" class values. Then use those to initialize the datepicker plugin:
$(document).ready(function () {
$(".date-input").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
});
Second, it's important to understand that this will only initialize the datepicker plugin for elements which exist when this code executes, which is only once when the page loads. Any elements added afterward would also need to have the plugin initialized at that time. So you'd do that in your AddNew function:
function AddNew() {
var clone = $("#tblEntry tr:last").clone().find('input').val('').end().insertAfter("#tblEntry tr:last");
$(clone).find(".date-input").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
}
If you like, you can reduce the repeated use of the datepicker plugin configuration by extracting that into its own function. Perhaps something like this:
function initDatepicker(selection) {
selection.datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
}
Then you'd call it in both places with your selected jQuery results:
$(document).ready(function () {
initDatepicker($(".date-input"));
});
and:
function AddNew() {
var clone = $("#tblEntry tr:last").clone().find('input').val('').end().insertAfter("#tblEntry tr:last");
initDatepicker($(clone).find(".date-input"));
}