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

Last Reply 3 months ago By dharmendr

Posted 3 months 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>

 

This question does not have replies that have been liked.