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>

You can see demo from here : Demo

I hope you found your best solution....






April 5, 2018 | Category : Angular JS
Related Posts