How to handle dates with MVC using AngularJS - angularjs

Question

I have a input datetime and I am passing dates on it.
Whatever value I pass but its always giving "01/01/0001 00:00:00".
Below is the code I have used. I am calling AddUpdateEmployee() on form ng-submit.
Model:-
public partial class Employee
{
public int Id { get; set; }
public string name { get; set; }
public DateTime DOB { get; set; }
public string Gender { get; set; }
public string Email { get; set; }
public string Mobile { get; set; }
public string Address { get; set; }
public DateTime JoiningDate { get; set; }
public int DepartmentID { get; set; }
public int DesignationID { get; set; }
}
View :-
<form name="form.userForm" ng-submit="AddUpdateEmployee()" novalidate >
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{Action}} Employee Details</h4>
</div>
<div class="modal-body">
<div class="form-horizontal validationcheck">
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Name :</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="text" class="form-control" data-modal="modal" filter="anything" ng-model="employeeName" placeholder="Employee's Name" ng-required="true" required="required" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>DOB :</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="datetime" class="form-control myCalendar" ng-model="employeeDOB" data-modal="modal" ng-required="true" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Gender:</b>
</div>
<div class="col-md-8 col-sm-8" ng-required="true">
<input type="radio" title="Male" data-modal="modal" ng-model="employeeGender" value="Male" />
Male
<input type="radio" title="Female" data-modal="modal" ng-model="employeeGender" value="Female" />
Female
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Email:</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="email" class="form-control" data-modal="modal" ng-model="employeeEmail" placeholder="Employee's Email" ng-required="true" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Mobile:</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="text" class="form-control" data-modal="modal" ng-model="employeeMobile" placeholder="Employee's Mobile" ng-required="true" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Address:</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="text" class="form-control" data-modal="modal" ng-model="employeeAddress" placeholder="Employee's Address" ng-required="true" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Joining Date:</b>
</div>
<div class="col-md-8 col-sm-8">
<input type="datetime" class="form-control myCalendar" data-modal="modal" ng-model="employeeJoiningDate" ng-required="true" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Department:</b>
</div>
<div class="col-md-8 col-sm-8">
<select id="ddlDepartment" class="form-control ddlDepartment" data-modal="modal" ng-model="employeeDepartment" ng-options="dep.Id as dep.DepartmentName for dep in departments" ng-required="true">
<option value="" selected>--Select Department--</option>
#* <option data-ng-repeat="dep in departments" value="{{dep.Id}}">{{dep.DepartmentName}}</option>*#
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
<b>Designation:</b>
</div>
<div class="col-md-8 col-sm-8">
<select id="ddlDesignation" class="form-control ddlDesignation" data-modal="modal" ng-model="employeeDesignation" ng-options="dsg.Id as dsg.DesignationName for dsg in designations" ng-required="true">
<option value="" selected>--Select Designation--</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"></div>
<div class="col-md-8 col-sm-8">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btnAdd btn btn-success" value="Save" ng-disabled="form.userForm.$invalid" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
Controller:-
public string UpdateEmployee(Employee Emp)
{
if (Emp != null)
{
using (EmpEntities dataContext = new EmpEntities())
{
int no = Convert.ToInt32(Emp.Id);
var employeeList = dataContext.Employees.Where(x => x.Id == no).FirstOrDefault();
employeeList.name = Emp.name;
employeeList.DOB = Emp.DOB;
employeeList.Gender = Emp.Gender;
employeeList.Email = Emp.Email;
employeeList.Mobile = Emp.Mobile;
employeeList.Address = Emp.Address;
//employeeList.JoiningDate = Convert.ToDateTime(Emp.JoiningDate.ToString("dd/MM/yyyy hh:mm"));
employeeList.JoiningDate = Emp.JoiningDate;
employeeList.DepartmentID = Emp.DepartmentID;
employeeList.DesignationID = Emp.DesignationID;
dataContext.SaveChanges();
return "Employee Updated Successfully";
}
}
else
{
return "Invalid Employee";
}
}
Angular Controller calling its Service:-
$scope.AddUpdateEmployee = function () {
//alert('here');
var Employee = {
Name: $scope.employeeName,
DOB: $scope.employeeDOB,
Gender: $scope.employeeGender,
Email: $scope.employeeEmail,
Mobile: $scope.employeeMobile,
Address: $scope.employeeAddress,
JoiningDate: $scope.employeeJoiningDate,
DepartmentID: $scope.employeeDepartment,
DesignationID: $scope.employeeDesignation
//alert();
};
var getAction = $scope.Action;
if (getAction == "Edit") {
Employee.Id = $scope.employeeId;
var getData = myService.updateEmp(Employee);
getData.then(function (msg) {
// GetAllEmployee();
}
Angular function responding its controller (Angular Service function responding to angular controller):-
this.updateEmp = function (employee) {
var response = $http({
method: "post",
url: "/Employee/UpdateEmployee",
data: JSON.stringify(employee),
dataType: "json"
});
return response;
}

Answer 1

Convert the value of date before you send it for example
if you use date plugin JQuery, etc. set it format to one excepted like dd/mm/yyyy and convert it to what your API excepted format yyyy-mm-dd
// here convert before you sent it with your Angualr Service
var apiDateFormat = Employee.DOB.split('/'); // ["MM", "dd", "yyyy"]
Employee.DOB = apiDateFormat[2]+ '-' +apiDateFormat[0] + '-'+ apiDateFormat[1];
// send it now... $http service