<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div ng-controller="DatepickerDemoCtrl">
      <h4>Popup</h4>
      <div class="row">
        <div class="col-md-6">
          <p class="input-group" week-picker="">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>

</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
});
angular.module('ui.bootstrap.demo').directive('weekPicker', function($document) {
		//additional requirements: include the ui-bootstrap-tpls-0.12.0.min.js file
		return {
			restrict: 'A',
			link: function(scope, el, attrs, ctrl) {
				$document.ready(function() {
					var datepicker = $(el).find('[datepicker]');
					var datepickerScope = datepicker.scope();
					
					var activateRow = function(row) {
						$(row).closest('tbody').find('button').removeClass('active');
						$(row).find('button').addClass('active');
					};

					var compareDates = function(date1, date2) {
						return (new Date( date1.getFullYear(), date1.getMonth(), date1.getDate() ) - new Date( date2.getFullYear(), date2.getMonth(), date2.getDate() ) );
					};

					datepickerScope.$watch('isOpen', function() {
						if (datepickerScope.isOpen)
						{
							$(datepicker).find('tbody button').each(function() {
								if (compareDates($(this).scope().dt.date, datepickerScope.date) === 0)
								{
									activateRow($(this).closest('tr'));
									return;
								}
							});
						}
					});

					$(datepicker).find('tbody button').bind('mouseover', function($event) {
						activateRow($(this).closest('tr'));
					});
				});
			}
		};
	});
/* Styles go here */