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.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<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.1/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', ['$scope', function ($scope) {
$scope.Date = new Date("2020/01/13 15:30");
$scope.OpenCalendar = function () {
$scope.IsOpen = true;
};
} ]);
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<div 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>Selected Date: {{ Date| date:'yyyy-MM-dd HH:mm:ss' }}</p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Screenshot
