I have an empty table with five empty rows under which I had a Datepicker field. I had an add button when I click on Add button one empty row will append to the table. Datepicker field is working fine before clicking on Add button but when I click on add button Datepicker is not identifying by the following code.
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
@for (int i = 0; i < SubSummerRepairListCollection.Count; i++)
{
var StyleShow = "display:" + (SubSummerRepairListCollection[i].SummerRepairID == null ? "block" : "none");
var StyleNone = "display:" + (SubSummerRepairListCollection[i].SummerRepairID == null ? "none" : "block");
if (i == 0)
{
btnAddNewShow = SubSummerRepairListCollection[i].SummerRepairID == null ? true : false;
}
<div class="SubSummer">
<div class="col-sm-4 text-center">
@Html.HiddenFor(m => SubSummerRepairListCollection[i].SummerRepairID, new { @id = "hidSummerRepairID" })
@Html.TextBoxFor(m => SubSummerRepairListCollection[i].LocationOfRepairs, htmlAttributes: new { @class = "form-control m-bot15", @style = StyleShow })
@Html.Label("", (SubSummerRepairListCollection[i] != null ? (SubSummerRepairListCollection[i].LocationOfRepairs != null ? SubSummerRepairListCollection[i].LocationOfRepairs.ToString() : "") : ""), new { @style = StyleNone, @class = "lblForms" })
</div>
<div class="col-sm-4 text-center">
@Html.TextBoxFor(m => SubSummerRepairListCollection[i].DescribeWorkRepairNeeded, htmlAttributes: new { @class = "form-control m-bot15", @style = StyleShow })
@Html.Label("", (SubSummerRepairListCollection[i] != null ? (SubSummerRepairListCollection[i].DescribeWorkRepairNeeded != null ? SubSummerRepairListCollection[i].DescribeWorkRepairNeeded.ToString() : "") : ""), new { @style = StyleNone, @class = "lblForms" })
</div>
<div class="col-sm-4 text-center">
@Html.TextBoxFor(m => SubSummerRepairListCollection[i].DesireCompletionDate, htmlAttributes: new { @class = "form-control m-bot15", @style = StyleShow, @id = "txtDesireCompletionDate", @onkeypress = "return isDateKey(event)" })
@Html.Label("", (SubSummerRepairListCollection[i] != null ? (SubSummerRepairListCollection[i].DesireCompletionDate != null ? Convert.ToDateTime(SubSummerRepairListCollection[i].DesireCompletionDate.ToString()).ToString("MM/dd/yyyy") : "") : ""), new { @style = StyleNone, @class = "lblForms" })
</div>
</div>
}
</div>
</div>
</div>
Script Code
$(function () {
$('.SubSummer').find('#txtDesireCompletionDate').datepicker({
format: 'mm/dd/yyyy', startDate: new Date(), autoclose: true
});
$('#btnAddNew').click(function (e) {
e.preventDefault();
var ArraySubSummer = Array();
$('.SubSummer').each(function (index, item) {
var obj = new Object();
obj.SummerRepairID = $(this).find('#hidSummerRepairID').val();
obj.LocationOfRepairs = $(this).find(':text')[0].value;
obj.DescribeWorkRepairNeeded = $(this).find(':text')[1].value;
obj.DesireCompletionDate = $(this).find(':text')[2].value;
ArraySubSummer.push(obj);
});
$.ajax({
url: "@(Url.Action("AddNewSubSummerRepairWorkOrder", "Forms"))",
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{ "lstSubSummerRepair":' + JSON.stringify(ArraySubSummer) + '}',
success: function (result) {
$("#SubSummerRepairContent").html(result);
}
});
return false;
});
});