UIBootstrap Datepicker Sample

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="script.js"></script>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="appName" ng-controller="TestCtrl">
    <h1>UIBootstrap Datepicker Sample</h1>
    <h2>Date : {{fromDate|date:'yyyy/M/d'}} ~ {{toDate|date:'yyyy/M/d'}}</h2>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="fromDate" is-open="fromDateOpened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" show-weeks="false" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="fromDateOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>
      </div>
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="toDate" is-open="toDateOpened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" show-weeks="false" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="toDateOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>
      </div>
    </div>
  </body>

</html>

// Code goes here
(function () {
    'use strict';
    angular.module('appName', ['ui.bootstrap'], function(){});
    angular.module('appName').controller('TestCtrl', function ($scope, $log) {

        var dateWatcher = null;
        var dateCollectionWatcher = null;

        var init = function() {

            $scope.today = function() {
                $scope.fromDate = new Date();
                $scope.toDate = new Date();
            };
            $scope.today();

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

            $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.fromDateOpen = function($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.fromDateOpened = true;
                $scope.toDateOpened = false;
            };

            $scope.toDateOpen = function($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.fromDateOpened = false;
                $scope.toDateOpened = true;
            };

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

            $scope.initDate = new Date('2016-15-20');
            $scope.format = 'yyyy/MM/dd';

            dateWatcher = $scope.$watch('[fromDate,toDate]', function(newValue, oldValue) {
                $log.debug('$watch : newValue : ', newValue);
                $log.debug('$watch : oldValue : ', oldValue);
            }, true);

            dateCollectionWatcher = $scope.$watchCollection('[fromDate,toDate]', function(newValue, oldValue) {
                $log.debug('$watchCollection : newValue : ', newValue);
                $log.debug('$watchCollection : oldValue : ', oldValue);
            });

        };
        init();
    });
}());