How to Show dates in MM-dd-yyyy format in angular

Question

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

Below are some snapshots and details about my project.

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!");
    });
}

The convention in JSON is to use the ISO 8601 format for dates. ASP.NET MVC returns dates in this format. Where did `/Date(..)` come from? In any case, if you want to change the *display* format, you need to parse the string (eg with `new Date()`) and then format it however you want — Panagiotis Kanavos, Jun 21 '16 at 08:03

Deblaton Jean-Philippe · Answer 1 · 2016-06-21T08:42:08.793

That is because date type does not really exist in JSon.

So, what you have to do first, is to cast your string into a date :

In your angular controller, you can simply do the following :

function GetAllEmployees() {
    var getData = myService.getEmployees();
    debugger;
    getData.then(function (emp) {
        //emp.DOB = new Date(emp.DOB);
        $scope.employees = emp.data; 
        for (var i = 0; i < $scope.employees.length; ++i){
            $scope.employees[i].DOB = new Date(emp.DOB);
        }

    }, function (emp) {
        alert("Records gathering failed!");
    });
}

Edit :

You can also create an interceptor doing something like this :

(function() {
    window.Company = window.Company || {};
    Company.DateTime = Company.DateTime || {};
    var parseDate = function(textValue) {
        return new Date(textValue);
    };

    Company.DateTime.parseObject = function(dataObject) {
        if (_.isString(dataObject) && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:\+|\-)?\d{1,2}:\d{2})$/.test(dataObject.trim())) {
            dataObject = parseDate(dataObject.trim());
        }
        if (_.isArray(dataObject)) {
            for (var i = 0, l = dataObject.length; i < l; i++) {
                dataObject[i] = Company.DateTime.parseObject(dataObject[i]);
            }
        }
        if (_.isObject(dataObject)) {
            for (var prop in dataObject) {
                if (dataObject.hasOwnProperty(prop)) {
                    dataObject[prop] = Company.DateTime.parseObject(dataObject[prop]);
                }
            }
        }
        return dataObject;
    };
}());

hi @Deblaton where to cast in controller, my controller is given above — Sunil Chaudhry, Jun 21 '16 at 08:19
@SunilChaudhry you don't cast dates to strings, you *format* them to strings (very strong hint). — Panagiotis Kanavos, Jun 21 '16 at 08:21
@Deblaton now its showing null as dates (when I alert(emp.DOB); its showing undefined, even alert(emp.data); is also undefined) — Sunil Chaudhry, Jun 21 '16 at 09:41
i fixed it by changing it to $scope.employees[i].DOB = new Date(emp.data[i].DOB);, but still getting null and when alert it shows "invalid date" — Sunil Chaudhry, Jun 21 '16 at 10:08

Sunil Chaudhry · Accepted Answer · 2016-06-24T05:44:46.417

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>

How to Show dates in MM-dd-yyyy format in angular

2 Answers2