Angularjs Simple Datepicker directive example code with Demo

By Hardik Savani | July 2, 2016 | Category : Angular

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


<html lang="en-US">

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

<link rel="stylesheet" href="/css/ngDatepicker.css">

<script src=""></script>

<script src=""></script>

<script src="/js/ngDatepicker.min.js"></script>


<div ng-app="myApp" ng-controller="customersCtrl">

<h2 class="text-center">Angularjs Simple Datepicker directive example code with Demo



<ng-datepicker ng-model="ctrl.date2" view-format="DD-MM-YYYY">





var app = angular.module('myApp', ['jkuri.datepicker']);

app.controller('customersCtrl', function($scope, $http) {





Hardik Savani
My name is 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, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: