Hi mahesh213,
Using the angular-input-date directive i have created the example.
Refer below link for details.
https://github.com/betsol/angular-input-date
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 getAll()
{
NorthwindEntities db = new NorthwindEntities();
try
{
var employeeList = (from obj in db.Employees
select new
{
Id = obj.EmployeeID,
Name = obj.FirstName,
ToDate = obj.BirthDate
}).ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
public JsonResult getEmployeeByNo1(string EmpNo)
{
NorthwindEntities db = new NorthwindEntities();
try
{
int no = Convert.ToInt32(EmpNo);
var employeeList = (from obj in db.Employees
where obj.EmployeeID == no
select new
{
Id = obj.EmployeeID,
Name = obj.FirstName,
ToDate = obj.BirthDate
}).ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<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/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/betsol/angular-input-date/master/src/angular-input-date.js"></script>
<script type="text/javascript" src="../../dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['ngInputDate', 'angularUtils.directives.dirPagination']);
app.filter("dateFilter", function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
};
});
app.controller("myCntrl", ['$scope', '$http', '$filter', 'myService', function ($scope, $http, $filter, myService) {
$scope.mahesh = false;
GetAllTerms();
function GetAllTerms() {
var getData = myService.getterms();
getData.then(function (tc) {
$scope.terms = tc.data;
}, function (tc) {
alert("Records gathering failed!");
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var newDate = new Date(parsedDate);
var month = ('0' + (newDate.getMonth())).slice(-2);
var day = ('0' + newDate.getDate()).slice(-2);
var year = newDate.getFullYear();
return new Date(year, month, day)
}
$scope.editState = function (state) {
var date = $scope.ToDate;
$scope.mahesh = true;
var getData = myService.getState(state.Id);
getData.then(function (emp) {
$scope.employee = emp.data;
$scope.Id = state.Id;
$scope.Name = state.Name;
$scope.ToDate = ConvertJsonDateToDateTime(state.ToDate);
$scope.Action = "Edit";
},
function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
}
} ]);
app.service("myService", function ($http) {
//get All employees
this.getterms = function () {
return $http.get("/Home/getAll");
};
// get Employee By Id
this.getState = function (employeeID) {
var response = $http({
method: "post",
url: "/Home/getEmployeeByNo1",
params: { EmpNo: JSON.stringify(employeeID) }
});
return response;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<div class="container">
<div>
<div id="wrapper" class="clearfix" ng-show="mahesh">
<div>
<div>
<div>
<label for="ToDate">Date</label>
<input type="date" ng-model="ToDate" name="Todate" />
</div>
<div>
<div>
<label for="Name">Name</label>
<input type="text" name="Name" ng-model="Name" />
</div>
</div>
</div>
</div>
</div>
<div>
<div class="table-responsive ">
<table id="dvData" class="table">
<tr>
<th><b>Id</b></th>
<th><b>Name</b></th>
<th><b>Date</b></th>
<th><b>Actions</b></th>
</tr>
<tr dir-paginate="state in terms|orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
<td>{{state.Id}}</td>
<td>{{state.Name}}</td>
<td>{{state.ToDate | dateFilter | date:"dd-MM-yyyy"}}</td>
<td><button type="button" ng-click="editState(state)">Edit</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
