Angularjs Datepicker Example using directive

datepicker is a primary requirement for every website. if you want to add datepicker in your angular js application then you are a right place. here i will give you full example of how to implement datepicker using angularjs directive.

In this example i simply use jquery ui library for datepicker and then i will use datepicker function using angularjs directive. So let's see bellow full example and understand how it works. It is very simple and easy example.

Example:


<!DOCTYPE html>
<html>
<head>
	<title>Welcome to HDTuto.com</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
</head>
<body>

<div ng-app="date">
<div ng-controller="HDTutoCtrl">
  <!-- jq -->
  jq date:<input type="text" id="date" name="date" ng-model="date">
  <span>{{date}}</span><br>

  <!-- ng -->
    ng date:<input type="text" datepicker ng-model="date2" />
  <span>{{date2}}</span>
</div>
</div>

<script type="text/javascript">
	$(function () {
    		$("#date").datepicker({
	                    dateFormat: 'yy-mm-dd'
	                    });
	});

	angular.module("date", [])
	    .directive("datepicker", function () {
	    return {
	        restrict: "A",
	        link: function (scope, el, attr) {
	            el.datepicker({
	                            dateFormat: 'yy-mm-dd'
	                        });
	        }
	    };
	})
	    .controller("HDTutoCtrl", function ($scope) {
	});
</script>

</body>
</html>

Angularjs Datepicker Example using directive

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles