Angularjs Simple Datepicker directive example code with Demo

By Hardik Savani | July 2, 2016 | | 18593 Viewer | Category : AngularJS


Share this post:

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>






We are Recommending you: