Set focus to selected DateTime in Bootstrap DateTimePicker using AngularJS in ASP.Net MVC

Last Reply 12 days ago By dharmendr

Posted 14 days ago

Hi,

in below url after clicking of edit button it was disaplying relevant date value on textbox

Set DateTime in DateTimePicker on Button Click using AngularJS in ASP.Net MVC

here i have seen one issue in that everytime at date contol it was focusing today date

as per as my requirement after clicking of edit button i need to focus relevant date (ex:1-2-2019) on datetimepicker

but here it was focusing today date on datetime control

could you please help me

Posted 13 days ago

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


Posted 12 days ago

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>&nbsp;</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