Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Create directive to display time only.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="../../Scripts/dirPagination.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyController', function ($scope, $http) {
$scope.Customers = [{ Time: '1-1-2019 13:30' },
{ Time: "2-2-2019 12:24"}]
});
app.directive('date', function (dateFilter) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var dateFormat = attrs['date'] || 'HH:mm';
ctrl.$formatters.unshift(function (modelValue) {
return dateFilter(dateFilter(new Date(modelValue), dateFormat));
});
}
};
})
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-bordered table-responsive">
<tr>
<th>Time</th>
</tr>
<tbody dir-paginate="m in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<tr>
<td><input type="text" date='HH:mm' ng-model="m.Time" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
