Date picker directive

Angular directive for date picker Angular V1.4

by Aakash Khapare M

HTML

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div ng-app="myApp" ng-controller="myController as ctrl">{{ ctrl.hello }} {{ ctrl.clicked }}
    <input type="text" my-date-picker date-changed-call="ctrl.callback()" date-value="ctrl.date" />{{ ctrl.date }}</div>

CSS

* {
    font-family: sans-serif;
}
body {
    margin: 0;
    padding: 0;
}
input[type="text"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 32px;
    border-radius: 3px;
    border: 2px solid #eee;
    font-size: 18px;
}

JavaScript

angular.module("myApp", [])
.controller("myController", ["$log", myController])
.directive("myDatePicker", [myDatePicker]);

function myController($log){
	var _this = this;
    _this.clicked = false;
    _this.hello = "Welcome!";
    _this.callback = function(){
		$log.debug("called");
    }
}

function myDatePicker(){
	return {
    	"restrict": "A",
        "link": link,
        scope: {
        	"dateChangedCall": "&",
            "dateValue": "="
        }
    }
    
    function link(scope, elem, attr){
    	$(elem).datepicker({
        	"onSelect": function(newDate){
				scope.dateValue = newDate;
            	scope.$eval(scope.dateChangedCall);
            }
        });
    }
}