Convert JSON Date to Date format using JavaScript and AngularJS in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

based upon below url i have generate a grid view dynamically

Display record on HTML Table based upon dynamic control values using AngularJS in ASP.Net MVC

relevant values are displaying properly in grid view

coming to my requirement is

https://i.ibb.co/gtdcFv5/Screenshot-357.png

if you can look at into screenshot here date is dispalying in string format

i need to dispaly date value instead of string

Could you please check it and help me

<thead>
    <tr>
        <th ng-repeat="(header, value) in employees[0]">
            {{header}}
        </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in employees">
        <td ng-repeat="cell in row">
            {{cell  @*| dateFilter | date:"dd-MM-yyyy"*@}}
        </td>
    </tr>
</tbody>

 

Posted 3 months ago Modified on 3 months ago

Hi mahesh213,

Since you are dynamically populate columns and rows it is nopt possible to use filter.

So to display the Date properly you need to convert it to Date before assigning to scope.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        NorthwindEntities entities = new NorthwindEntities();
        var employees = entities.Employees
            .Select(x => new
            {
                Id = x.EmployeeID,
                Name = x.FirstName + " " + x.LastName,
                DOB = x.BirthDate,
                City = x.City,
                Country = x.Country
            }).ToList();
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

View

<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
            $http.get("/Home/GetEmployees")
            .then(function (response) {
                for (var i = 0; i < response.data.length; i++) {
                    // Loop through each property in the Array.
                    for (var property in response.data[i]) {
                        if (response.data[i].hasOwnProperty(property)) {
                            var resx = /Date\(([^)]+)\)/;
                            // Checking Date with regular expresion.
                            if (resx.test(response.data[i][property])) {
                                // Setting Date in dd/MM/yyyy format.
                                response.data[i][property] = ConvertJsonDateToDate(response.data[i][property]);
                            }
                        }
                    }
                }
                $scope.Employees = response.data;
            });
            function ConvertJsonDateToDate(date) {
                var parsedDate = new Date(parseInt(date.substr(6)));
                var newDate = new Date(parsedDate);
                var month = ('0' + (newDate.getMonth() + 1)).slice(-2);
                var day = ('0' + newDate.getDate()).slice(-2);
                var year = newDate.getFullYear();
                return day + "/" + month + "/" + year;
            }
        } ]);
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th ng-repeat="(header, value) in Employees[0]">{{header}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in Employees">
                    <td ng-repeat="cell in row">{{cell}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

Screenshot