Sunil Chaudhry Sunil Chaudhry - 5 months ago 26
AngularJS Question

Show dates in MM-dd-yyyy format in angular

Hi am getting a invalid date in view(even its correct in db).

Below are some snapshots and details about my project.

enter image description here

enter image description here

Model:-

public partial class Employee
{
public int Id { get; set; }
public string name { get; set; }
//[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
//[DataType(DataType.Date)]
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; }
}


JSON function to get records from database using linq:-

public JsonResult getAll()
{
using (empEntities dataContext = new empEntities ())
{
var employeeList = (from E in dataContext.Employees
join dep in dataContext.Departments on E.DepartmentID equals dep.Id
join dsg in dataContext.Designations on E.DesignationID equals dsg.Id
orderby E.Id
select new
{
E.Id,
E.name,
E.DOB,
E.Gender,
E.Email,
E.Mobile,
E.Address,
E.JoiningDate,
dep.DepartmentName,
E.DepartmentID,
dsg.DesignationName,
E.DesignationID
}).ToList();
var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
JsonResult.MaxJsonLength = int.MaxValue;
return JsonResult;
}
}


View:-

<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:2">
@*<td style="width: 100px;">{{employee.DOB |date:'dd-MM-yyyy'}}</td>*@
<td style="width: 100px;">{{employee.DOB | date:"MM-dd-yyyy 'at' h:mma"}}</td>


Angular Controller:-

function GetAllEmployees() {
var getData = myService.getEmployees();
debugger;
getData.then(function (emp) {
//emp.DOB = new Date(emp.DOB);
$scope.employees = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}

Answer

I got the solution.

By change in controller, it will cast the strings in dates.

Angular Controller:-

function GetAllEmployees() {
            var getData = myService.getEmployees();      
            getData.then(function (emp) {         
                $scope.employees = emp.data;
                for (var i = 0; i < $scope.employees.length; ++i) {                   
                    $scope.employees[i].DOB = new Date(emp.data[i].DOB.match(/\d+/)[0] * 1);
                }
            }, function (emp) {
                alert("Records gathering failed!");
            });
        }

Model:-

public partial class Employee
    {
        public int Id { get; set; }
        public string name { get; set; }
        //[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
        //[DataType(DataType.Date)]
        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; }
    }

JSON function to get records from database using linq:-

public JsonResult getAll()
        {
            using (empEntities dataContext = new empEntities ())
            {
                var employeeList = (from E in dataContext.Employees
                                    join dep in dataContext.Departments on E.DepartmentID equals dep.Id
                                    join dsg in dataContext.Designations on E.DesignationID equals dsg.Id
                                    orderby E.Id
                                    select new
                                    {
                                        E.Id,
                                        E.name,
                                        E.DOB,
                                        E.Gender,
                                        E.Email,
                                        E.Mobile,
                                        E.Address,
                                        E.JoiningDate,
                                        dep.DepartmentName,
                                        E.DepartmentID,
                                        dsg.DesignationName,
                                        E.DesignationID
                                    }).ToList();
                var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
                JsonResult.MaxJsonLength = int.MaxValue;
                return JsonResult;
            }
        }

View:-

  <tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:2">
     @*<td style="width: 100px;">{{employee.DOB |date:'dd-MM-yyyy'}}</td>*@
     <td style="width: 100px;">{{employee.DOB | date:"MM-dd-yyyy 'at' h:mma"}}</td>