Adding DatePicker to the Web Page in AngularJS

  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <script     
  6.           src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">  
  7.     </script>    
  8.     <script>    
  9.           function MainController($scope) {    
  10.             $scope.date = new Date();    
  11.         }    
  12.     </script>    
  13. </head>    
  14. <body ng-app>    
  15.     <div ng-controller="MainController">    
  16.         <input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />    
  17.         <br />    
  18.  <br />    
  19.  <b>Selected Date is: </b>{{ date | date: 'dd/MM/yyyy' }}    
  20.     </div>    
  21. </body>    
  22. </html>