如何以角度显示MM-dd-yyyy格式的日期

Question

您在视图中收到无效日期（即使在数据库中也是正确的）。

以下是有关我的项目的一些快照和详细信息。

型号： -

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; }
    }

使用linq从数据库获取记录的JSON函数： -

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;
            }
        }

查看： -

  <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>

角度控制器： -

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 1

这是因为日期类型在JSon中并不存在。

所以，首先要做的是将字符串转换为日期：

在角度控制器中，您只需执行以下操作：

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

编辑：

你也可以创建这样的拦截器：

(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;
    };
}());

Answer 2

我得到了解决方案。

通过更改控制器，它将在日期中转换字符串。

角度控制器： -

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

型号： -

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; }
    }

使用linq从数据库获取记录的JSON函数： -

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;
            }
        }

查看： -

  <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>