Hi mahesh213,
Use bootstrap UI datetimepicker control to focus on selected date.
For more details on bootstrap UI datetimepicker refer below link and download the required plugins.
https://github.com/Gillardo/bootstrap-ui-datetime-picker
Check this example. Now please take its reference and implement in your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetAll()
{
return Json(Employees(), JsonRequestBehavior.AllowGet);
}
public JsonResult getempByNo(int id)
{
Employee employee = Employees().Where(x => x.Id == id).FirstOrDefault();
return Json(employee, JsonRequestBehavior.AllowGet);
}
public List<Employee> Employees()
{
List<Employee> employees = new List<Employee>();
employees.Add(new Employee { Id = 1, Date = new DateTime(2019, 08, 10, 13, 23, 43) });
employees.Add(new Employee { Id = 2, Date = new DateTime(2019, 08, 12, 23, 23, 05) });
employees.Add(new Employee { Id = 3, Date = new DateTime(2020, 01, 13, 01, 30, 01) });
return employees;
}
public class Employee
{
public int Id { get; set; }
public DateTime Date { get; set; }
}
}
View
<style type="text/css">
.form-horizontal
{
width: 300px;
}
.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default
{
border: 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.0/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="../../datetime-picker.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker'])
app.controller('MyController', function ($scope, $http, $window, myService, $filter) {
$scope.isOpen = false;
$scope.openCalendar = function () {
$scope.isOpen = true;
};
GetEmployees();
function GetEmployees() {
$scope.employees = [];
$http({
method: 'Get',
url: '/Home/GetAll'
}).success(function (data, status, headers, config) {
for (var i = 0; i < data.length; i++) {
data[i].Date = ConvertJsonDateToDateTime(data[i].Date);
}
$scope.employees = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var tzoffset = (new Date(parsedDate)).getTimezoneOffset() * 60000;
var localISOTime = (new Date(parsedDate - tzoffset)).toISOString().substring(0, 19).replace('T', ' ').replace(/-/g, '/');
return localISOTime;
}
$scope.Edit = function (e) {
var getData = myService.getemps(e.Id);
getData.then(function (s) {
$scope.e = s.data;
$scope.Id = e.Id;
$scope.Date = new Date(e.Date);
}, function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
}
});
app.service("myService", function ($http) {
this.getemps = function (Id) {
var response = $http({
method: "post",
url: "/home/getempByNo",
params: { id: JSON.stringify(Id) }
});
return response;
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Date TimePicker:
<p class="input-group">
<input type="text" class="form-control" datetime-picker="yyyy-MM-dd HH:mm:ss" ng-model="Date"
is-open="isOpen" ng-click="openCalendar()" />
</p>
<br />
<div>
<table class="table table-bordered table-hover table-striped">
<tr>
<th>Id</th>
<th>Date</th>
<th> </th>
</tr>
<tbody ng-repeat="e in employees">
<tr>
<td>{{e.Id}}</td>
<td>{{e.Date}}</td>
<td><a ng-click="Edit(e)" href="">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
Screenshot
