Date Retrieving Problem

Question

I am retrieving data from database in MVC core using jquery Ajax. All the fields have successfully retrieved and work well but the datae fields cannot be retrieved. For date i used the date control i.e. <input type="date" />. Please check only the following fields:

$("#dtpEmpBirthDate").val(response[i].EmpBirthDate);
$("#dtpEmpJoiningDate").val(response[i].EmpJoiningDate);

Please explain how to add the retrieved date value from the database into the date control. The above two date fields do not populate with the response object. Following is my complete code of jquery Ajax:

//Retrieve the Employee record using the selected Employee ID
$.ajax({
url: "/RetrieveData/RetrieveEmployeeRecordByID",
type: "GET",
dataType: "json",
data: { "id": empID },
success: function (response) {
for (var i = 0; i < response.length; i++) {
$("#txtEmployeeCode").val(response[i].EmpCode);
$("#txtEmpFirstName").val(response[i].EmpFirstName);
$("#txtEmpLastName").val(response[i].EmpLastName);
$("#txtEmpFullName").val(response[i].EmpFullName);
$("#dtpEmpBirthDate").val(response[i].EmpBirthDate);
$("#cmbEmpGender").val(response[i].EmpGender);
$("#txtEmpFullAddress").val(response[i].EmpFullAddress);
$("#dtpEmpJoiningDate").val(response[i].EmpJoiningDate);
$("#cmbEmpReligion").val(response[i].EmpReligion);
$("#txtEmpTelephoneNumber").val(response[i].EmpTelephoneNumber);
$("#txtEmpMobileNumber").val(response[i].EmpMobileNumber);
$("#txtEmpEmailAddress").val(response[i].EmpEmailAddress);
$("#cmbEmpBranchCode").val(response[i].EmpBranchCode);
$("#cmbEmpDepttCode").val(response[i].EmpDepttCode);
$("#cmbEmpOccupationCode").val(response[i].EmpOccupationCode);
$("#cmbEmpNationality").val(response[i].EmpNationality);
$("#cmbEmpMaritalStatus").val(response[i].EmpMaritalStatus);
$("#txtEmpDependent").val(response[i].EmpDependent);
$("#txtEmpEmergencyContact").val(response[i].EmpEmergencyContact);
$("#txtEmpEmergencyContactPerson").val(response[i].EmpEmergencyContactPerson);
$("#txtEmpEmergencyContactPersonRelation").val(response[i].EmpEmergencyContactPersonRelation);
$("#txtEmployeePictureFullPath").val(response[i].EmpPicture);
} //End of for Loop
},
error: function (response) {
alert("Record cannot be displayed", response.responseText);
}
});

The above Jquery Ajax successfully retrieves data from the database and all the fields are populated well but only the date fields cannot be populated. Please give me solution.

 

Following is the HTML code of the date fields:

<div class="col-md-3">
<div class="form-group">
<label asp-for="EmpBirthDate" class="control-label label-size">Birth Date</label>
<input type="date" asp-for="EmpBirthDate" id="dtpEmpBirthDate" class="form-control textbox" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label asp-for="EmpJoiningDate" class="control-label label-size">Joining Date</label>
<input type="date" asp-for="EmpJoiningDate" id="dtpEmpJoiningDate" class="form-control textbox" />
</div>
</div>

Following is the code of my Action Method:

public JsonResult RetrieveEmployeeRecordByID(string id)
{
var sa = new JsonSerializerSettings();
var empRecord = from rec in dbContext.EmployeeGeneralDetails
where rec.EmpCode == id
select rec;
return Json(empRecord, sa);
}