April 4, 2023
Category : Angular
Angularjs Simple Datepicker directive example code with Demo
In this example you implement datepicker directive simply. In this example i used ngDatepicker plugin. It is very simple way to use and integrate. It is very flexible you can set format and other option. So If you also want to add datepicker then can do like as bellow example.
In this example i include
/css/ngDatepicker.css path on link so you can download css file from here : Click Here and Also i include /js/ngDatepicker.min.js script tag so you can download js file from 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>
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
