Angularjs Simple Datepicker directive example

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will be implement datepicker directive simply. Now In this example i will use ngDatepicker plugin. We are know that it is a very simple way to use and also integrate. It is also very flexible we can set the format and other option also. So now If you also need to add the datepicker then you can do this like as bellow example.

Now in this example i also add /css/ngDatepicker.css path on link so.

you want to download css file then click here : Click Here and

Also i am also include /js/ngDatepicker.min.js script tag so if you want download js file then click here : Click Here

Example:

<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/ngDatepicker.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
<script src="/js/ngDatepicker.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
  <h2 class="text-center">Angularjs Simple Datepicker directive example code with Demo
</h2>
  <div>
      <ng-datepicker  ng-model="ctrl.date2" view-format="DD-MM-YYYY">
      </ng-datepicker>
  </div>
</div>
<script>
  var app = angular.module('myApp', ['jkuri.datepicker']);
  app.controller('customersCtrl', function($scope, $http) { 
  });
</script>
</body>
</html> 

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →