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

Last Reply 11 days ago By dharmendr

Posted 12 days ago

Hi,

I have one table with records

Id     Date

1     12-02-2019 13:23:43

Currently my requirement is that after clicking of edit button need to display datetime on textbox.

currently in my case after clicking of edit button it was displaying only date

Implement DateTimePicker in AngularJS

Could you please help me

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="angularjs-datetime-picker.css" />
<script type="text/javascript" src="angularjs-datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularjs-datetime-picker'])
        app.controller('MyController', function ($scope, $http, $window,myService, $filter) {
             
            GetEmployees();
            
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetAll'
                }).success(function (data, status, headers, config) {
                    $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 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.Edit = function (e) {
      var getData = myService.getemps(e.Id);
      getData.then(function (s) {
          $scope.e = s.data;
          $scope.Id = e.Id;
          
          $scope.Date = ConvertJsonDateToDateTime(e.Date);
           
      }, function (msg) {
          alert(msg.data);
          $scope.msg = msg.data;
      });
          $scope.apply();      
      }               
});
app.service("myService", function ($http) {         
    this.getemps = function (Id) {
        debugger;
        var response = $http({
            method: "post",
            url: "/home/getempByNo",
            params: {
                id: JSON.stringify(Id)
            }
        });
        return response;
    }
});
</script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
       Date TimePicker:<input datetime-picker date-format="yyyy-MM-dd HH:mm:ss" ng-model="Date" />
       <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.Id)" href="">Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

 

Posted 11 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct 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(2019, 08, 15, 01, 30, 01) });
        return employees;
    }

    public class Employee
    {
        public int Id { get; set; }
        public DateTime Date { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="../../angularjs-datetime-picker.css" />
    <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.3.9/angular.min.js"></script>
    <script type="text/javascript" src="../../angularjs-datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularjs-datetime-picker'])
        app.controller('MyController', function ($scope, $http, $window, myService, $filter) {
            GetEmployees();
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetAll'
                }).success(function (data, status, headers, config) {
                    $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', ' ');
                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 = ConvertJsonDateToDateTime(e.Date);

                }, function (msg) {
                    alert(msg.data);
                    $scope.msg = msg.data;
                });
                $scope.apply();
            }
        });
        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>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        Date TimePicker:<input datetime-picker date-format="yyyy-MM-dd HH:mm:ss" ng-model="Date" />
        <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>
</body>
</html>

Screenshot