Implement DateTimePicker in AngularJS

Last Reply 6 days ago By dharmendr

Posted 6 days ago

Hi,

I have one textbox

currently my requirement is that i need to select date and time at a time

could you please help me

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
                 });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
       TimePikcer:<input type="text" ng-model="TimePicker"/>
    </div>
</body>
</html>

 

Posted 6 days ago

Hi mahesh213,

Using the below link i have created the example.

To use the DateTimePicker add the required js and css files in your project from the below link.

https://github.com/kineticsocial/angularjs-datetime-picker

for more detils refer below link.

https://www.npmjs.com/package/angularjs-datetime-picker

HTML

<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, $window) {
        $scope.Save = function () {
            $window.alert($scope.TimePicker);
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    Date TimePicker:<input datetime-picker date-format="yyyy-MM-dd HH:mm:ss" ng-model="TimePicker" />
    <input type="button" ng-click="Save()" value="Save" />
</div>

Screenshot