Angular: jQueryUI Datepicker

http://angularjs.org/

by vaiism

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <p><b>Date from</b> <input id="date1" value="1/1/1980"  ng-model="fromDate" my-datepicker /></p>
        <p><b>Data do:</b> <input id="date2" value="1/1/1980" ng-model="toDate" my-datepicker /></p>
        Choosen date from: {{fromDate}} to: {{toDate}}
        <br />
        {{myval}}
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', ['myApp.directives']);


function MainCtrl($scope) {            
}

angular.module('myApp.directives', [])
  .directive('myDatepicker', function() {
    return function(scope, element, attrs) {     

       element.datepicker({
         changeYear : true,
         changeMonth : true,
         appendText : '(yyyy-mm-dd)',
         dateFormat : 'yy-mm-dd', 
                onSelect: function(dateText) {                    
                    var mdlAttr = $(this).attr('ng-model');
                    scope[mdlAttr] = dateText;                    
                    scope.$apply();                                                   
                }                
        });

    }
  });