AngularJS datepicker

by Pankaj Sapkal

HTML

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

    </div>
</div>

CSS

</style> <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> <style>

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("dateCtrl", function ($scope) {});